<template>
  <div>
    <div
      class="home page-template-default page page-id-861 wp-custom-logo wp-embed-responsive theme-goya woocommerce-js woo-variation-gallery woo-variation-gallery-theme-goya woo-variation-swatches wvs-behavior-hide wvs-theme-goya-child wvs-show-label wvs-tooltip blog-id-1 header-sticky header-full-width goya-lazyload floating-labels login-single-column et-login-popup sticky-header-dark header-transparent-mobiles page-header-transparent dark-title wpb-js-composer js-comp-ver-7.0 vc_responsive et-animation-ready header_on_scroll">
      <div id="yith-wcwl-popup-message" style="display: none;">
        <div id="yith-wcwl-message"></div>
      </div>
      <div id="wrapper" class="open">
        <div class="click-capture"></div>
        <div class="page-wrapper-inner">
          <div role="main" class="site-content">
            <div class="header-spacer"></div>
            <div class="page-padding post-861 page type-page status-publish hentry">
              <section class="wpb-content-wrapper">
                <div id="main-slider-row" class="sec_row container-fluid">
                  <div class="vc_row wpb_row vc_row-fluid no-padding align-center">

                    <div class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-xs et-dark-column">
                      <div class="vc_column-inner">

                        <div class="carousel-slide">
                          <img :src="bannerSlides[0].image" :alt="bannerSlides[0].label || ''" class="carousel-image">
                          <div v-if="bannerSlides[0].link" class="carousel-content">
                            <a :href="bannerSlides[0].link" class="carousel-link"></a>
                          </div>
                         </div>
                        <!-- <vue-carousel :slides="bannerSlides" :autoplay="true" :interval="4000"></vue-carousel> -->

                      </div>
                    </div>
                    <div
                      class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-lg vc_hidden-md vc_hidden-sm et-dark-column">
                      <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                          <vue-carousel :slides="bannerSlides.slice(1)" :autoplay="true" :interval="4000"></vue-carousel>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="sec_row container">
                  <div class="vc_row wpb_row vc_row-fluid ">
                    <div class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-xs et-dark-column">
                      <div class="vc_column-inner" id="vvvshart">
                        <div class="wpb_wrapper">
                          <div v-for="(row, rowIndex) in categoryDataPC" :key="'pc-row-' + rowIndex"
                            class="vc_row wpb_row vc_inner vc_row-fluid max_width vc_row-o-equal-height vc_row-o-content-middle vc_row-flex">
                            <div v-for="(item, index) in row" :key="'pc-item-' + rowIndex + '-' + index"
                              :class="['wpb_column', 'vc_column_container', item.animation, 'vc_col-sm-' + item.colSm, 'vc_col-md-' + item.colMd, 'et-dark-column', item.extraClass]">
                              <div class="vc_column-inner" :class="item.innerClass">
                                <div class="wpb_wrapper">
                                  <!-- 中间特殊内容区块 -->
                                  <template v-if="item.type === 'special'">
                                    <div class="vc_empty_space" style="height: 20px"><span
                                        class="vc_empty_space_inner"></span></div>
                                    <div class="wpb_text_column wpb_content_element">
                                      <div class="wpb_wrapper">
                                        <h2 class="wpb_wrapper" style="text-align: center;">{{ item.title }}</h2>
                                      </div>
                                    </div>
                                    <div :id="item.buttonId" class="et_btn_align_center animation scale animated">
                                      <a :href="item.link" class="et_btn button et_btn_md outlined color-light"
                                        role="button" title="">
                                        <span>{{ item.buttonText }}</span>
                                      </a>
                                    </div>
                                  </template>

                                  <!-- 图片区块 -->
                                  <template v-else>
                                    <div
                                      :class="['et-banner-' + item.bannerId, 'et-banner', 'content-full', 'image-type-fluid', 'text-color-dark', 'hover-effect', 'hover-zoom', item.extraBannerClass]">
                                     
                                       <nuxt-link :to="item.link" class="et-banner-link et-banner-link-full">
                                        <img :width="item.imgWidth" :height="item.imgHeight" :src="item.imgSrc"
                                          class="et-banner-main-image wvs-archive-product-image et-lazyload lazyloaded">
                                        <div class="et-banner-content" v-if="item.title">
                                          <div class="et-banner-content-inner container">
                                            <div class="et-banner-text h_center v_center align_center">
                                              <div class="et-banner-text-inner" :class="{ 'animated': item.animated }"
                                                :data-animate="item.animateEffect">
                                                <h2 class="et-banner-title color-light large">{{ item.title }}</h2>
                                              </div>
                                            </div>
                                          </div>
                                        </div>

                                     </nuxt-link>  
                                    </div>
                                  </template>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="sec_row container">
                  <div class="vc_row wpb_row vc_row-fluid ">
                    <div
                      class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-lg vc_hidden-md vc_hidden-sm et-dark-column">
                      <div class="vc_column-inner" id="woprdoutc">
                        <div class="wpb_wrapper">
        
                          <div v-for="(item, index) in categoryDataMobile" :key="'mobile-item-' + index"
                            class="vc_row wpb_row">
                            <div
                              class="wpb_column">
                              <div class="vc_column-inner" :class="item.innerClass">
                                <div class="wpb_wrapper">
                                  <div
                                    :class="['et-banner-' + item.bannerId,  'content-full', 'image-type-fluid', 'text-color-dark', 'hover-effect', 'hover-zoom', item.extraBannerClass]">
                                      <nuxt-link :to="item.link" class="et-banner-link et-banner-link-full">
                                      <img :width="item.imgWidth" :height="item.imgHeight" :src="item.imgSrc"
                                        class="et-banner-main-image wvs-archive-product-image">
                                    </nuxt-link>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>




                        </div>
                      </div>
                    </div>
                  </div>
                </div>



                <div class="sec_row container-fluid">
                  <div class="vc_row wpb_row vc_row-fluid no-padding">
                    <div class="wpb_column vc_column_container vc_col-sm-12 et-dark-column">
                      <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                          <div
                            class="vc_separator wpb_content_element vc_separator_align_center vc_sep_width_100 vc_sep_pos_align_center vc_separator_no_text vc_sep_color_grey vc_custom_1556305572662 vc_custom_1556305572662">
                            <span class="vc_sep_holder vc_sep_holder_l"><span class="vc_sep_line"></span></span><span
                              class="vc_sep_holder vc_sep_holder_r"><span class="vc_sep_line"></span></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



                <div class="sec_row container">
                  <div class="vc_row wpb_row vc_row-fluid ">
                    <div
                      class="wpb_column vc_column_container animation bottom-to-top vc_col-sm-12 et-dark-column animated">
                      <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                          <div class="vc_row wpb_row vc_inner vc_row-fluid max_width align-center">
                            <div
                              class="text-center wpb_column vc_column_container vc_col-sm-12 vc_col-lg-6 vc_col-md-9 et-dark-column">
                              <div class="vc_column-inner">
                                <div class="wpb_wrapper">
                                  <div class="wpb_text_column wpb_content_element">
                                    <div class="wpb_wrapper">
                                      <h2 style="text-align: center;">Articoli più recenti</h2>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="vc_row wpb_row vc_inner vc_row-fluid max_width" id="pcproduct">
                            <div class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-xs et-dark-column">
                              <div class="vc_column-inner">
                                <div class="wpb_wrapper">
                                  <div class="carousel-container">
                                    <ul
                                      class="et-product et-main-products products row et-product-style1 hover-animation-jump products-latest-products et-no-variations carousel et-product-slider slick slick-arrows-outside slick-controls-gray slick-dots-centered slick-dots-active-small slick-initialized slick-slider"
                                      >
                                      <div class="slick-list draggable">
                                        <div class="slick-track">
                                          <li v-for="(product, index) in staticProductList" :key="product.id"
                                            class="item et-listing-style1 col-6 col-sm-6 col-md-4 col-lg-3 small_grid_5 wvs-archive-product-wrapper product type-product post-84894 status-publish first instock product_cat-abiti has-post-thumbnail sale featured taxable shipping-taxable purchasable product-type-variable has-default-attributes woo-variation-gallery-product slick-slide slick-current slick-active"
                                            style="width: 355px;">
                                            <div class="product-inner animation fade animated">
                                              <figure class="product_thumbnail et-image-hover">
                                               <nuxt-link :to="product.link">
                                                  <img width="600" height="900" :src="product.mainImage"
                                                    class="main-image wvs-archive-product-image et-lazyload ls-is-cached lazyloaded">
                                                </nuxt-link>
                                              </figure>
                                              <div class="caption">
                                                <div class="product-title">
                                                  <h2>
                                                    <nuxt-link :to="product.link" class="product-link">{{ product.title }}
                                                    </nuxt-link>
                                                  </h2>
                                                </div>
                                                <div class="product_after_title">
                                                  <div class="product_after_shop_loop_price">
                                                    <span class="price">
                                                      <del v-if="product.discount > 0" aria-hidden="true">
                                                        <span class="woocommerce-Price-amount amount">
                                                          <bdi><span
                                                              class="woocommerce-Price-currencySymbol">{{GLOBAL.shopPayCurrency}}</span>&nbsp;{{
                                                                product.originalPrice }}</bdi>
                                                        </span>
                                                      </del>
                                                      <ins>
                                                        <span class="woocommerce-Price-amount amount">
                                                          <bdi><span
                                                              class="woocommerce-Price-currencySymbol">{{GLOBAL.shopPayCurrency}}</span>&nbsp;{{
                                                                product.salePrice }}</bdi>
                                                        </span>
                                                      </ins>
                                                    </span>
                                                  </div>

                                                </div>
                                              </div>
                                            </div>
                                          </li>
                                        </div>
                                      </div>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>



                          <div class="vc_row wpb_row vc_inner vc_row-fluid max_width" id="h5product">
                            <div
                              class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-lg vc_hidden-md vc_hidden-sm et-dark-column">
                              <div class="vc_column-inner">
                                <div class="wpb_wrapper">
                                  <div class="carousel-container">
                                    <ul
                                      class="et-product et-main-products products row et-product-style2 hover-animation-jump products-latest-products et-no-variations carousel et-product-slider slick slick-arrows-outside slick-controls-gray slick-dots-centered slick-dots-active-small slick-initialized slick-slider"
                                      >
                                      <div class="slick-list draggable">
                                        <div class="slick-track">
                                          <li style="width:48%" v-for="(product, index) in staticProductList" :key="index"
                                            class="item et-listing-style2 col-6 col-sm-6 col-md-6 col-lg-6 small_grid_3 wvs-archive-product-wrapper product type-product post-84894 status-publish first instock product_cat-abiti has-post-thumbnail sale featured taxable shipping-taxable purchasable product-type-variable has-default-attributes woo-variation-gallery-product slick-slide slick-current slick-active">
                                            <div class="product-inner fade">
                                              <figure class="product_thumbnail et-image-hover">
                                                <nuxt-link :to="product.link">
                                                  <img width="600" height="900" :src="product.mainImage"
                                                    class="main-image wvs-archive-product-image et-lazyload lazyload">
                                                </nuxt-link>
                                                <span v-if="product.isNew" class="badge new">New</span>
                                                <span v-if="product.discount > 0" class="badge onsale perc">
                                                  <span class="onsale-before">-</span>
                                                  <span class="onsale-percent">{{ product.discount }}</span>
                                                  <span class="onsale-after">%</span>
                                                  <span class="onsale-off">Off</span>
                                                </span>
                                              </figure>
                                              <div class="caption">
                                                <div class="product-title">
                                                  <h2>
                                                   <nuxt-link :to="product.link" class="product-link">
                                                      tabindex="0">{{
                                                      product.title }}</nuxt-link>
                                                  </h2>
                                                </div>
                                                <div class="product_after_title">
                                                  <div class="product_after_shop_loop_price">
                                                    <span class="price">
                                                      <del v-if="product.originalPrice > product.salePrice"
                                                        aria-hidden="true">
                                                        <span class="woocommerce-Price-amount amount">
                                                          <bdi>
                                                            <span
                                                              class="woocommerce-Price-currencySymbol">{{GLOBAL.shopPayCurrency}}</span>&nbsp;{{
                                                            product.originalPrice }}
                                                          </bdi>
                                                        </span>
                                                      </del>
                                                      <ins>
                                                        <span class="woocommerce-Price-amount amount">
                                                          <bdi>
                                                            <span
                                                              class="woocommerce-Price-currencySymbol">{{GLOBAL.shopPayCurrency}}</span>&nbsp;{{
                                                            product.salePrice }}
                                                          </bdi>
                                                        </span>
                                                      </ins>
                                                    </span>
                                                  </div>


                                                </div>
                                              </div>
                                            </div>
                                          </li>
                                        </div>
                                      </div>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>




                        </div>
                      </div>
                    </div>
                  </div>
                </div>





                <div class="sec_row container-fluid">
                  <div class="vc_row wpb_row vc_row-fluid no-padding vc_custom_1579111637642 vc_row-has-fill">
                    <div class="wpb_column vc_column_container vc_col-sm-12 et-dark-column">
                      <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                          <div class="vc_row wpb_row vc_inner vc_row-fluid max_width align-center">
                            <div
                              class="text-center wpb_column vc_column_container vc_col-sm-12 vc_col-lg-8 vc_col-md-9 et-dark-column">
                              <div class="vc_column-inner">
                                <div class="wpb_wrapper">
                                  <div id="et-testimonials-45"
                                    class="slick-dots-centered et-testimonials-slider slick slick-initialized slick-slider slick-dotted">

                                    <div class="desktop-testimonials">
                                      <vue-carousel1 :slides="testimonialSlides" :autoplay="true" :interval="3000">
                                        <template v-slot:default="{ slide, index }">
                                          <div class="et-testimonial has-image"
                                            :class="{ 'slick-current slick-active': index === currentIndex }">
                                            <blockquote>
                                              <p>{{ slide.text }}</p>
                                            </blockquote>
                                            <div class="et-testimonial-image">
                                              <img width="140" height="140" :src="slide.image"
                                                class="attachment-140x140 size-140x140 wvs-archive-product-image ls-is-cached lazyloaded">
                                            </div>
                                            <div class="et-testimonial-author"> <cite>{{ slide.author }}</cite></div>
                                          </div>
                                        </template>
                                      </vue-carousel1>
                                    </div>

                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>









                <div class="sec_row container">
                  <div class="vc_row wpb_row vc_row-fluid vc_custom_1579111652347">
                    <div class="wpb_column vc_column_container vc_col-sm-12 et-dark-column">
                      <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                          <div class="vc_row wpb_row vc_inner vc_row-fluid max_width align-center align-center">
                            <div
                              class="text-center wpb_column vc_column_container vc_col-sm-12 vc_col-lg-6 vc_col-md-9 et-dark-column">
                              <div class="vc_column-inner">
                                <div class="wpb_wrapper">
                                  <div class="wpb_text_column wpb_content_element">
                                    <div class="wpb_wrapper">
                                      <h2 style="text-align: center;"><a href="">Visit Us</a></h2>
                                      <p style="text-align: center;">Vieni a trovarci presso i nostri punti vendita:
                                        scopri i nostri prodotti, lasciati guidare dalle nostre personal shopper!</p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="et-image-629 et-image aligncenter et_image_link">
                            <div class="et-image-inner animation scale animated">
                              <div class="et-image-thumb"> <img width="1023" height="566"
                                  src="https://www.becafashion.com/crmebimage/public/product/Foto-19-06-21-10-41-51.jpg"
                                  class="attachment-full wvs-archive-product-image et-lazyload ls-is-cached lazyloaded">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
import VueCarousel from '@/components/VueCarousel.vue'
import recommended from "@/components/recommended.vue";
import promotions from "@/components/promotions.vue";
import firstNew from "@/components/first_new.vue";
import VueCarousel1 from '@/components/VueCarousel1.vue';
import VueCarousel2 from '@/components/VueCarousel2.vue';
import {
  goMerchant,
  goShopDetail
} from "@/utils/order.js";
import product from "@/components/product.vue";

export default {
  name: "IndexPage",
  auth: false,
  components: {
    recommended,
    promotions,
    firstNew,
    product,
    VueCarousel,
    VueCarousel2
  },
  data() {
    return {
      staticProductList: [ 
      ],
      currentIndex: 0,
      categoryDataPC: [
      ],
      // 移动端分类数据
      categoryDataMobile: [
      ],
      bannerSlides: [
      ],
      testimonialSlides: [
        {
          image: 'https://www.becafashion.com/crmebimage/public/product/Foto-23-08-17-12-59-55-150x150.jpg',
          text: 'Negozio carinissimo con merce di ottima qualità! Le commesse sono gentili e disponibili e per niente assillanti. Consigliano, propongono e valorizzano il prodotto venduto senza risultare invadenti o forzate.',
          author: 'Miryam S.'
        },
        {
          image: 'https://www.becafashion.com/crmebimage/public/product/Foto-23-08-17-12-59-55-150x150.jpg',
          text: 'Il locale è molto carino, la commessa molto gentile, mi ha seguito durante la scelta dei capi di abbigliamento offrendo anche molti consigli. La scelta dei capi è vasta, tutti di ottima qualità. Visto il periodo preciso anche: massimo rispetto delle normative anti Covid.',
          author: 'Federica M.'
        },
        {
          image: 'https://www.becafashion.com/crmebimage/public/product/Foto-23-08-17-12-59-55-150x150.jpg',
          text: 'Vestiti sempre alla moda.',
          author: 'Linda T.'
        },
        {
          image: 'https://www.becafashion.com/crmebimage/public/product/Foto-23-08-17-12-59-55-150x150.jpg',
          text: 'Bel negozio, commesse bravissime.',
          author: 'Bri B.'
        },
        {
          image: 'https://www.becafashion.com/crmebimage/public/product/Foto-23-08-17-12-59-55-150x150.jpg',
          text: 'Negozio molto carino, compro spesso per le mie figlie soprattutto per quella di 24 anni e devo dire, che le ragazze sono sempre gentili, educate, cortesi e disponibili',
          author: 'Valentina C.'
        },
        {
          image: 'https://www.becafashion.com/crmebimage/public/product/Foto-23-08-17-12-59-55-150x150.jpg',
          text: 'Commesse sempre gentilissime, vestiti carini al prezzo giusto.',
          author: 'Francesca D.'
        },
        {
          image: 'https://www.becafashion.com/crmebimage/public/product/Foto-23-08-17-12-59-55-150x150.jpg',
          text: 'Capi di abbigliamento che possono davvero arrivare al gusto e alla portata di tutti! Non si esce mai a mani vuote.',
          author: 'Gagliola M.'
        }
      ],
      seen: false,
      hide: true,
      activityindexList: [],
      storeList: [],
      bannerList: [],
      colors: ["#99A9BF", "#E93323", "#E93323"],
      visible: false,
      recommendList: [],
      productList: [],
      adList: [],
      goodsList: [],
      MerTypeList: [],
      categoryCurrent: [],
      toponeList: [],
      list: [],
      actList: [],
      pullRefreshss: true,
      page: 1, //代表页面的初始页数
      limit: 10,
      limits: 13,
      scollY: null, // 离底部距离有多少
      pageTotal: 0 //总页数
    };
  },
  async asyncData({
    app,
    error,
    store
  }) {
    typeof localstorage !== 'undefined' && window.localStorage.clear();

    if (store.state.productClassify.length === 0) {
     await store.dispatch('getProductClassify');
    }
    let [
      list,
      proList
    ] = await Promise.all([
      app.$axios.get("/api/pc/home/index"),
      app.$axios.get("/api/front/index/product", {
        params: {
          page: 1,
          limit: 13
        }
      }),
      app.$axios.get("/api/front/activity/index/list")
    ]);
    typeof localstorage !== 'undefined' && localStorage.setItem("homeDataPc", JSON.stringify(list.data));

  // 处理 bannerList 数据为 bannerSlides 格式
    const bannerSlides = list.data.banner.map(item => {
      return {
        image: item.pic || '',
        label: item.title || '',
        link: item.url || ''
      };
    });
    
    // 处理 proList 数据为 staticProductList 格式
    const staticProductList = proList.data.list.map(item => {
      return {
        id: item.id,
        title: item.storeName || '',
        mainImage: item.image || '',
        hoverImage: item.image || '', // 如果接口中有其他图片可以用于hover效果，可以替换
        link: { path: `/goods_detail/${item.id}` },
        isNew: item.isNew || false, // 根据接口数据补充
        discount: item.discount || 0, // 根据接口数据补充
        originalPrice: item.otPrice || 0,
        salePrice: item.price || 0,
        description: item.storeInfo || ''
      };
    });

    const categoryDataPC = [];
    const productClassify = store.state.productClassify || [];
  
    // 只处理三级分类
    let rowIndex = 0;
    for (let i = 0; i < productClassify.length && rowIndex < 4; i++) {
      const category = productClassify[i];
      if (category && category.childList && category.childList.length > 0) {
        // 处理二级分类下的三级分类
        for (let j = 0; j < category.childList.length && rowIndex < 4; j++) {
          const subCategory = category.childList[j];
          if (subCategory && subCategory.childList && subCategory.childList.length > 0) {
            // 处理三级分类
            for (let k = 0; k < subCategory.childList.length && rowIndex < 4; k++) {
              const thirdCategory = subCategory.childList[k];
              if (thirdCategory) {
                // 创建新行
                if (!categoryDataPC[rowIndex]) {
                  categoryDataPC[rowIndex] = [];
                }
                
                // 每行最多3个分类
                const rowItems = categoryDataPC[rowIndex];
                if (rowItems.length < 3) {
                  rowItems.push({
                    colSm: 4,
                    colMd: 4,
                    animation: k % 2 === 0 ? 'animation left-to-right animated' : 'animation right-to-left animated',
                    innerClass: '',
                    bannerId: `thirdcategory-${thirdCategory.id || ''}`,
                    link: { path: '/goods/goods_search', query: { cid: thirdCategory.id || '' } },
                    imgSrc: thirdCategory.icon || subCategory.icon || category.icon || '',
                    imgWidth: 768,
                    imgHeight: 960,
                    title: thirdCategory.name || '',
                    animated: true,
                    animateEffect: 'et-fadeInDown'
                  });
                  
                  // 如果该行已满，进入下一行
                  if (rowItems.length >= 3) {
                    rowIndex++;
                  }
                }
              }
            }
          }
        }
      }
    }

    
    // 处理分类数据为 categoryDataMobile 格式，只显示三级分类
    const categoryDataMobile = [];
    for (let i = 0; i < productClassify.length; i++) {
      const category = productClassify[i];
      if (category && category.childList && category.childList.length > 0) {
        // 处理二级分类下的三级分类
        for (let j = 0; j < category.childList.length; j++) {
          const subCategory = category.childList[j];
          if (subCategory && subCategory.childList && subCategory.childList.length > 0) {
            // 添加三级分类
            for (let k = 0; k < subCategory.childList.length; k++) {
              const thirdCategory = subCategory.childList[k];
              if (thirdCategory) {
                categoryDataMobile.push({
                  innerClass: k % 2 === 0 ? 'vc_custom_1617058454694' : 'vc_custom_1617058490640',
                  bannerId: `mobile-thirdcategory-${thirdCategory.id || ''}`,
                  link: { path: '/goods/goods_search', query: { cid: thirdCategory.id || '' } },
                  imgSrc: thirdCategory.icon || subCategory.icon || category.icon || '',
                  imgWidth: 768,
                  imgHeight: 512
                });
              }
            }
          }
        }
      }
    }
  
    return {
      list: list.data,
      bannerList: list.data.banner,
      adList: list.data.bastBanner,
      proList: proList.data.list,
      bannerSlides, // 直接返回处理好的 bannerSlides
      staticProductList, // 直接返回处理好的 staticProductList
      categoryDataPC,
      categoryDataMobile
    };
  },
  beforeDestroy() {
    window.onscroll = null;
  },
  beforeMount() {
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start();
      setTimeout(() => this.$nuxt.$loading.finish(), 1000);
    });
    this.$cookies.set("merPlatChatConfig", {
      serviceEmail: this.list.consumerEmail,
      serviceLink: this.list.consumerH5Url,
      servicePhone: this.list.consumerHotline,
      serviceMessage: this.list.consumerMessage,
      serviceType: this.list.consumerType
    });
    this.pullRefresh();
  },
  methods: {
    goDetail(item) {
      goShopDetail(item.id, this);
    },
    goTopone() {
      this.$router.push({
        path: "/goods/top_one"
      });
    },
    watchScroll() {
      let _this = this;
      this.scollY =
        this.comsys.getScrollTop() +
        this.comsys.getWindowHeight() -
        this.comsys.getScrollHeight();
      // 把下拉刷新置为false，防止多次请求
      if (this.scollY >= -50) {
        if (this.page >= Math.ceil(this.pageTotal / this.limits)) {
          this.pullRefreshss = true;
          return false;
        }
        if (!this.pullRefreshss) {
          return false;
        }
        _this.pullRefreshss = false;
        if (_this.productList.length < _this.pageTotal) {
          // 加页码数
          _this.page++;
          _this.getList();
        }
      } else {
        // 其他时候把下拉刷新置为true
        _this.pullRefreshss = true;
      }
    },
    getList() {
      let currentPage = {
        page: this.page,
        limit: this.limits
      };
      this.$axios
        .get(`/api/front/index/product`, {
          params: currentPage
        })
        .then(res => {
          this.pageTotal = res.data.total;
          let proList = res.data.list;
          this.productList = this.productList.concat(proList);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    gopage() {
      this.$router.push({
        path: "/merchant/merchant_street"
      });
    },
    goMerchant(item) {
      goMerchant(item.id, this);
    },
    // 下拉加载ajax
    pullRefresh: function () {
      let _this = this;
      window.onscroll = function () {
        _this.watchScroll();
      };
    }
  }
};
</script>

<style scoped>
.testimonials-section {
  padding: 40px 0;
  background-color: #f9f9f9;
}

.et-testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

blockquote {
  font-style: italic;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  max-width: 800px;
}

.et-testimonial-image {
  margin-bottom: 10px;
}

.et-testimonial-image img {
  border-radius: 50%;
  object-fit: cover;
}

.et-testimonial-author cite {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

/* 响应式设计 */
.desktop-testimonials {
  display: block;
}

.mobile-testimonials {
  display: none;
}

/* 移动设备样式 */
@media (max-width: 768px) {
  .desktop-testimonials {
    display: none;
  }

  .mobile-testimonials {
    display: block;
  }

  blockquote {
    font-size: 16px;
    max-width: 100%;
    padding: 0 15px;
  }

  .et-testimonial {
    padding: 10px;
  }

  .et-testimonial-author cite {
    font-size: 14px;
  }
}
</style>
<style>
.vue-carousel {
  height: 900px;
}

@media (max-width: 768px) {
  .vue-carousel {
    height: 600px;
    /* 移动端高度 */
  }
}

.st0 {
  fill: #6f6f6e
}

.st1 {
  fill: #e3032e
}

.st3 {
  fill: url(#SVGID_00000168808829467475428190000015609817177472665019_)
}

.st4 {
  opacity: .2;
  clip-path: url(#SVGID_00000112616234942694573860000012430564291092645766_);
  fill: #fff
}
</style>
<style>
table.pagodil-table-block {
  display: inline-block;
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  margin: 0;
}

table.pagodil-table-block tbody tr td {
  padding: 0;
  vertical-align: middle;
  background: none;
}

table.pagodil-table-block tbody tr td.pagodil-pl {
  padding-left: 15px;
}

table.pagodil-table-block tbody tr td.pagodil-pr {
  padding-right: 15px;
}

svg.pagodil-logo {
  width: auto;
  display: block;
}

svg.pagodil-logo.with-hover:hover {
  cursor: pointer;
}

svg.pagodil-info-icon {
  height: 15px;
  margin-top: 9px;
}

svg.pagodil-info-icon:hover {
  cursor: pointer;
}

#pagodil-modal-container {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000000;
  overflow-y: auto;
}

#pagodil-modal-container.open {
  display: block;
}

.pagodil-modal-content {
  width: 100%;
  max-width: 350px;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  background: white;
  padding: 25px;
  z-index: 1000100;
  border-radius: 15px;
  box-sizing: border-box;
}

.pagodil-modal-content .pagodil-modal-header {
  text-align: right;
}

.pagodil-modal-content .pagodil-modal-header svg {
  width: 15px;
  color: #6F6F6E;
}

.pagodil-modal-content .pagodil-modal-header svg:hover {
  cursor: pointer;
}

.pagodil-modal-content .logo-container {
  text-align: center;
  margin-top: -20px;
  margin-bottom: 20px;
}

.pagodil-modal-content .logo-container svg {
  display: inline;
  width: 150px;
}

.pagodil-modal-content h1 {
  font-family: Arial;
  text-align: center;
  margin-top: 0;
  color: #6F6F6E;
  font-size: 25px;
  line-height: 32px;
}

.pagodil-modal-content p {
  font-family: Arial;
  font-size: 16px;
  color: #6F6F6E;
  margin-bottom: 15px;
  line-height: 23px;
}

.pagodil-modal-content p.list {
  margin-bottom: 5px;
  margin-top: 0;
}

.pagodil-modal-content p.more-info {
  margin-bottom: 0;
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
}

.pagodil-modal-content p svg {
  display: inline-block;
  width: 12px;
  color: orange;
  margin-right: 10px;
}
</style>
<style id="goya-shortcodes-styles-inline-css">
.et-banner-686481f9b4ecf.et-banner {
  height: 100vh;
  ;
}

.et-banner-686481f9b531c.et-banner {
  height: 100vh;
  ;
}

.et-banner-686481f9b55e9.et-banner {
  height: 100vh;
  ;
}

.et-banner-686481f9b9230 .et-banner-text .et-banner-title {
  color: #000000;
}

.et-banner-686481f9b9230 .et-banner-text .et-banner-subtitle,
.et-banner-686481f9b9230 .et-banner-text .et-banner-subtitle.tag_style {
  color: #ffffff;
}

.et-banner-686481f9b95ee .et-banner-text .et-banner-title {
  color: #000000;
}
</style>
<style scoped>
@import '../assets/css/8ifkp(5).css';
@import '../assets/css/8ifkp.css';
@import '../assets/css/8ifkp(1).css';
@import '../assets/css/dgl7a.css';
@import '../assets/css/8ifkp(2).css';
@import '../assets/css/8ifkp(3).css';
@import '../assets/css/8ifkp(4).css';
@import '../assets/css/8ifl9.css';
</style>
<style id="wp-block-library-theme-inline-css">
.wp-block-audio figcaption {
  color: #555;
  font-size: 13px;
  text-align: center
}

.is-dark-theme .wp-block-audio figcaption {
  color: hsla(0, 0%, 100%, .65)
}

.wp-block-audio {
  margin: 0 0 1em
}

.wp-block-code {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: Menlo, Consolas, monaco, monospace;
  padding: .8em 1em
}

.wp-block-embed figcaption {
  color: #555;
  font-size: 13px;
  text-align: center
}

.is-dark-theme .wp-block-embed figcaption {
  color: hsla(0, 0%, 100%, .65)
}

.wp-block-embed {
  margin: 0 0 1em
}

.blocks-gallery-caption {
  color: #555;
  font-size: 13px;
  text-align: center
}

.is-dark-theme .blocks-gallery-caption {
  color: hsla(0, 0%, 100%, .65)
}

.wp-block-image figcaption {
  color: #555;
  font-size: 13px;
  text-align: center
}

.is-dark-theme .wp-block-image figcaption {
  color: hsla(0, 0%, 100%, .65)
}

.wp-block-image {
  margin: 0 0 1em
}

.wp-block-pullquote {
  border-bottom: 4px solid;
  border-top: 4px solid;
  color: currentColor;
  margin-bottom: 1.75em
}

.wp-block-pullquote cite,
.wp-block-pullquote footer,
.wp-block-pullquote__citation {
  color: currentColor;
  font-size: .8125em;
  font-style: normal;
  text-transform: uppercase
}

.wp-block-quote {
  border-left: .25em solid;
  margin: 0 0 1.75em;
  padding-left: 1em
}

.wp-block-quote cite,
.wp-block-quote footer {
  color: currentColor;
  font-size: .8125em;
  font-style: normal;
  position: relative
}

.wp-block-quote.has-text-align-right {
  border-left: none;
  border-right: .25em solid;
  padding-left: 0;
  padding-right: 1em
}

.wp-block-quote.has-text-align-center {
  border: none;
  padding-left: 0
}

.wp-block-quote.is-large,
.wp-block-quote.is-style-large,
.wp-block-quote.is-style-plain {
  border: none
}

.wp-block-search .wp-block-search__label {
  font-weight: 700
}

.wp-block-search__button {
  border: 1px solid #ccc;
  padding: .375em .625em
}

:where(.wp-block-group.has-background) {
  padding: 1.25em 2.375em
}

.wp-block-separator.has-css-opacity {
  opacity: .4
}

.wp-block-separator {
  border: none;
  border-bottom: 2px solid;
  margin-left: auto;
  margin-right: auto
}

.wp-block-separator.has-alpha-channel-opacity {
  opacity: 1
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  width: 100px
}

.wp-block-separator.has-background:not(.is-style-dots) {
  border-bottom: none;
  height: 1px
}

.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
  height: 2px
}

.wp-block-table {
  margin: 0 0 1em
}

.wp-block-table td,
.wp-block-table th {
  word-break: normal
}

.wp-block-table figcaption {
  color: #555;
  font-size: 13px;
  text-align: center
}

.is-dark-theme .wp-block-table figcaption {
  color: hsla(0, 0%, 100%, .65)
}

.wp-block-video figcaption {
  color: #555;
  font-size: 13px;
  text-align: center
}

.is-dark-theme .wp-block-video figcaption {
  color: hsla(0, 0%, 100%, .65)
}

.wp-block-video {
  margin: 0 0 1em
}

.wp-block-template-part.has-background {
  margin-bottom: 0;
  margin-top: 0;
  padding: 1.25em 2.375em
}
</style>
<style id="getwooplugins-variation-swatches-style-inline-css"></style>
<style id="yith-wcwl-main-inline-css">
.yith-wcwl-share li a {
  color: #FFFFFF;
}

.yith-wcwl-share li a:hover {
  color: #FFFFFF;
}

.yith-wcwl-share a.facebook {
  background: #39599E;
  background-color: #39599E;
}

.yith-wcwl-share a.facebook:hover {
  background: #39599E;
  background-color: #39599E;
}

.yith-wcwl-share a.twitter {
  background: #45AFE2;
  background-color: #45AFE2;
}

.yith-wcwl-share a.twitter:hover {
  background: #39599E;
  background-color: #39599E;
}

.yith-wcwl-share a.pinterest {
  background: #AB2E31;
  background-color: #AB2E31;
}

.yith-wcwl-share a.pinterest:hover {
  background: #39599E;
  background-color: #39599E;
}

.yith-wcwl-share a.email {
  background: #FBB102;
  background-color: #FBB102;
}

.yith-wcwl-share a.email:hover {
  background: #39599E;
  background-color: #39599E;
}

.yith-wcwl-share a.whatsapp {
  background: #00A901;
  background-color: #00A901;
}

.yith-wcwl-share a.whatsapp:hover {
  background: #39599E;
  background-color: #39599E;
}
</style>
<style id="classic-theme-styles-inline-css">
.wp-block-button__link {
  color: #fff;
  background-color: #32373c;
  border-radius: 9999px;
  box-shadow: none;
  text-decoration: none;
  padding: calc(.667em + 2px) calc(1.333em + 2px);
  font-size: 1.125em
}

.wp-block-file__button {
  background: #32373c;
  color: #fff;
  text-decoration: none
}
</style>
<style id="global-styles-inline-css">
body {
  --wp--preset--color--black: #000000;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--light-green-cyan: #7bdcb5;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--color--gutenberg-white: #ffffff;
  --wp--preset--color--gutenberg-shade: #f8f8f8;
  --wp--preset--color--gutenberg-gray: #777777;
  --wp--preset--color--gutenberg-dark: #282828;
  --wp--preset--color--gutenberg-accent: #b9a16b;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
  --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
  --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
  --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
  --wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
  --wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
  --wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 42px;
  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
  --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}

:where(.is-layout-flex) {
  gap: 0.5em;
}

:where(.is-layout-grid) {
  gap: 0.5em;
}

body .is-layout-flow>.alignleft {
  float: left;
  margin-inline-start: 0;
  margin-inline-end: 2em;
}

body .is-layout-flow>.alignright {
  float: right;
  margin-inline-start: 2em;
  margin-inline-end: 0;
}

body .is-layout-flow>.aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}

body .is-layout-constrained>.alignleft {
  float: left;
  margin-inline-start: 0;
  margin-inline-end: 2em;
}

body .is-layout-constrained>.alignright {
  float: right;
  margin-inline-start: 2em;
  margin-inline-end: 0;
}

body .is-layout-constrained>.aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}

body .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto !important;
  margin-right: auto !important;
}

body .is-layout-constrained>.alignwide {
  max-width: var(--wp--style--global--wide-size);
}

body .is-layout-flex {
  display: flex;
}

body .is-layout-flex {
  flex-wrap: wrap;
  align-items: center;
}

body .is-layout-flex>* {
  margin: 0;
}

body .is-layout-grid {
  display: grid;
}

body .is-layout-grid>* {
  margin: 0;
}

:where(.wp-block-columns.is-layout-flex) {
  gap: 2em;
}

:where(.wp-block-columns.is-layout-grid) {
  gap: 2em;
}

:where(.wp-block-post-template.is-layout-flex) {
  gap: 1.25em;
}

:where(.wp-block-post-template.is-layout-grid) {
  gap: 1.25em;
}

.has-black-color {
  color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-color {
  color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-color {
  color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-color {
  color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-color {
  color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-color {
  color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-color {
  color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-color {
  color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-color {
  color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-color {
  color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-color {
  color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-color {
  color: var(--wp--preset--color--vivid-purple) !important;
}

.has-black-background-color {
  background-color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-background-color {
  background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-background-color {
  background-color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-background-color {
  background-color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-background-color {
  background-color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-background-color {
  background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-background-color {
  background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-background-color {
  background-color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-background-color {
  background-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-background-color {
  background-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-background-color {
  background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-background-color {
  background-color: var(--wp--preset--color--vivid-purple) !important;
}

.has-black-border-color {
  border-color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-border-color {
  border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-border-color {
  border-color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-border-color {
  border-color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-border-color {
  border-color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-border-color {
  border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-border-color {
  border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-border-color {
  border-color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-border-color {
  border-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-border-color {
  border-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-border-color {
  border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-border-color {
  border-color: var(--wp--preset--color--vivid-purple) !important;
}

.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
  background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;
}

.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
  background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;
}

.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
  background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;
}

.has-luminous-vivid-orange-to-vivid-red-gradient-background {
  background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;
}

.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
  background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;
}

.has-cool-to-warm-spectrum-gradient-background {
  background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
}

.has-blush-light-purple-gradient-background {
  background: var(--wp--preset--gradient--blush-light-purple) !important;
}

.has-blush-bordeaux-gradient-background {
  background: var(--wp--preset--gradient--blush-bordeaux) !important;
}

.has-luminous-dusk-gradient-background {
  background: var(--wp--preset--gradient--luminous-dusk) !important;
}

.has-pale-ocean-gradient-background {
  background: var(--wp--preset--gradient--pale-ocean) !important;
}

.has-electric-grass-gradient-background {
  background: var(--wp--preset--gradient--electric-grass) !important;
}

.has-midnight-gradient-background {
  background: var(--wp--preset--gradient--midnight) !important;
}

.has-small-font-size {
  font-size: var(--wp--preset--font-size--small) !important;
}

.has-medium-font-size {
  font-size: var(--wp--preset--font-size--medium) !important;
}

.has-large-font-size {
  font-size: var(--wp--preset--font-size--large) !important;
}

.has-x-large-font-size {
  font-size: var(--wp--preset--font-size--x-large) !important;
}

.wp-block-navigation a:where(:not(.wp-element-button)) {
  color: inherit;
}

:where(.wp-block-post-template.is-layout-flex) {
  gap: 1.25em;
}

:where(.wp-block-post-template.is-layout-grid) {
  gap: 1.25em;
}

:where(.wp-block-columns.is-layout-flex) {
  gap: 2em;
}

:where(.wp-block-columns.is-layout-grid) {
  gap: 2em;
}

.wp-block-pullquote {
  font-size: 1.5em;
  line-height: 1.6;
}
</style>
<style id="woocommerce-inline-inline-css">
.woocommerce form .form-row .required {
  visibility: visible;
}
</style>
<style id="dashicons-inline-css">
[data-font="Dashicons"]:before {
  font-family: 'Dashicons' !important;
  content: attr(data-icon) !important;
  speak: none !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
</style>
<style id="woo-variation-gallery-inline-css">
:root {
  --wvg-thumbnail-item: 4;
  --wvg-thumbnail-item-gap: 0px;
  --wvg-single-image-size: 500px;
  --wvg-gallery-width: 30%;
  --wvg-gallery-margin: 30px;
}

.woo-variation-product-gallery {
  max-width: 30% !important;
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .woo-variation-product-gallery {
    width: 720px;
    max-width: 100% !important;
  }
}

@media only screen and (max-width: 480px) {
  .woo-variation-product-gallery {
    width: 320px;
    max-width: 100% !important;
  }
}
</style>
<style id="woo-variation-swatches-inline-css">
:root {
  --wvs-tick: url("data:image/svg+xml;utf8,%3Csvg filter='drop-shadow(0px 0px 2px rgb(0 0 0 / .8))' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M4 16L11 23 27 7'/%3E%3C/svg%3E");
  --wvs-cross: url("data:image/svg+xml;utf8,%3Csvg filter='drop-shadow(0px 0px 5px rgb(255 255 255 / .6))' xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ff0000' stroke-linecap='round' stroke-width='0.6' d='M5 5L19 19M19 5L5 19'/%3E%3C/svg%3E");
  --wvs-position: center;
  --wvs-single-product-large-item-width: 40px;
  --wvs-single-product-large-item-height: 40px;
  --wvs-single-product-large-item-font-size: 16px;
  --wvs-single-product-item-width: 30px;
  --wvs-single-product-item-height: 30px;
  --wvs-single-product-item-font-size: 16px;
  --wvs-archive-product-item-width: 30px;
  --wvs-archive-product-item-height: 30px;
  --wvs-archive-product-item-font-size: 16px;
  --wvs-tooltip-background-color: #333333;
  --wvs-tooltip-text-color: #FFFFFF;
  --wvs-item-box-shadow: 0 0 0 1px #a8a8a8;
  --wvs-item-background-color: #FFFFFF;
  --wvs-item-text-color: #000000;
  --wvs-hover-item-box-shadow: 0 0 0 3px #DDDDDD;
  --wvs-hover-item-background-color: #FFFFFF;
  --wvs-hover-item-text-color: #000000;
  --wvs-selected-item-box-shadow: 0 0 0 2px #000000;
  --wvs-selected-item-background-color: #FFFFFF;
  --wvs-selected-item-text-color: #000000
}
</style>
<style id="goya-customizer-styles-inline-css">
.theme-goya .font-catcher {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
}

body,
blockquote cite,
div.vc_progress_bar .vc_single_bar .vc_label,
div.vc_toggle_size_sm .vc_toggle_title h4 {
  font-size: 16px;
}

.wp-caption-text,
.woocommerce-breadcrumb,
.post.listing .listing_content .post-meta,
.footer-bar .footer-bar-content,
.side-menu .mobile-widgets p,
.side-menu .side-widgets p,
.products .product.product-category a div h2 .count,
#payment .payment_methods li .payment_box,
#payment .payment_methods li a.about_paypal,
.et-product-detail .summary .sizing_guide,
#reviews .commentlist li .comment-text .woocommerce-review__verified,
#reviews .commentlist li .comment-text .woocommerce-review__published-date,
.commentlist>li .comment-meta,
.widget .type-post .post-meta,
.widget_rss .rss-date,
.wp-block-latest-comments__comment-date,
.wp-block-latest-posts__post-date,
.commentlist>li .reply,
.comment-reply-title small,
.commentlist .bypostauthor .post-author,
.commentlist .bypostauthor>.comment-body .fn:after,
.et-portfolio.et-portfolio-style-hover-card .type-portfolio .et-portfolio-excerpt {
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #282828;
}

.et-banner .et-banner-content .et-banner-title.color-accent,
.et-banner .et-banner-content .et-banner-subtitle.color-accent,
.et-banner .et-banner-content .et-banner-link.link.color-accent,
.et-banner .et-banner-content .et-banner-link.link.color-accent:hover,
.et-banner .et-banner-content .et-banner-link.outlined.color-accent,
.et-banner .et-banner-content .et-banner-link.outlined.color-accent:hover {
  color: #b9a16b;
}

.et-banner .et-banner-content .et-banner-subtitle.tag_style.color-accent,
.et-banner .et-banner-content .et-banner-link.solid.color-accent,
.et-banner .et-banner-content .et-banner-link.solid.color-accent:hover {
  background: #b9a16b;
}

.et-iconbox.icon-style-background.icon-color-accent .et-feature-icon {
  background: #b9a16b;
}

.et-iconbox.icon-style-border.icon-color-accent .et-feature-icon,
.et-iconbox.icon-style-simple.icon-color-accent .et-feature-icon {
  color: #b9a16b;
}

.et-counter.counter-color-accent .h1,
.et-counter.icon-color-accent i {
  color: #b9a16b;
}

.et_btn.solid.color-accent {
  background: #b9a16b;
}

.et_btn.link.color-accent,
.et_btn.outlined.color-accent,
.et_btn.outlined.color-accent:hover {
  color: #b9a16b;
}

.et-animatype.color-accent .et-animated-entry,
.et-stroketype.color-accent * {
  color: #b9a16b;
}

.slick-prev:hover,
.slick-next:hover,
.flex-prev:hover,
.flex-next:hover,
.mfp-wrap.quick-search .mfp-content [type="submit"],
.et-close,
.single-product .pswp__button:hover,
.content404 h4,
.woocommerce-tabs .tabs li a span,
.woo-variation-gallery-wrapper .woo-variation-gallery-trigger:hover:after,
.mobile-menu li.menu-item-has-children.active>.et-menu-toggle:after,
.remove:hover,
a.remove:hover,
span.minicart-counter.et-count-zero,
.tag-cloud-link .tag-link-count,
.star-rating>span:before,
.comment-form-rating .stars>span:before,
.wpmc-tabs-wrapper li.wpmc-tab-item.current,
div.argmc-wrapper .tab-completed-icon:before,
div.argmc-wrapper .argmc-tab-item.completed .argmc-tab-number,
.widget ul li.active,
.et-wp-gallery-popup .mfp-arrow {
  color: #b9a16b;
}

.menu-item.accent-color a,
.accent-color:not(.fancy-tag),
.accent-color:not(.fancy-tag) .wpb_wrapper>h1,
.accent-color:not(.fancy-tag) .wpb_wrapper>h2,
.accent-color:not(.fancy-tag) .wpb_wrapper>h3,
.accent-color:not(.fancy-tag) .wpb_wrapper>h4,
.accent-color:not(.fancy-tag) .wpb_wrapper>h5,
.accent-color:not(.fancy-tag) .wpb_wrapper>h6,
.accent-color:not(.fancy-tag) .wpb_wrapper>p {
  color: #b9a16b !important;
}

.accent-color.fancy-tag,
.wpb_text_column .accent-color.fancy-tag:last-child,
.accent-color.fancy-tag .wpb_wrapper>h1,
.accent-color.fancy-tag .wpb_wrapper>h2,
.accent-color.fancy-tag .wpb_wrapper>h3,
.accent-color.fancy-tag .wpb_wrapper>h4,
.accent-color.fancy-tag .wpb_wrapper>h5,
.accent-color.fancy-tag .wpb_wrapper>h6,
.accent-color.fancy-tag .wpb_wrapper>p {
  background-color: #b9a16b;
}

.wpmc-tabs-wrapper li.wpmc-tab-item.current .wpmc-tab-number,
.wpmc-tabs-wrapper li.wpmc-tab-item.current:before,
.tag-cloud-link:hover,
div.argmc-wrapper .argmc-tab-item.completed .argmc-tab-number,
div.argmc-wrapper .argmc-tab-item.current .argmc-tab-number,
div.argmc-wrapper .argmc-tab-item.last.current+.argmc-tab-item:hover .argmc-tab-number {
  border-color: #b9a16b;
}

.vc_progress_bar.vc_progress-bar-color-bar_orange .vc_single_bar span.vc_bar,
span.minicart-counter,
.filter-trigger .et-active-filters-count,
.et-active-filters-count,
div.argmc-wrapper .argmc-tab-item.current .argmc-tab-number,
div.argmc-wrapper .argmc-tab-item.visited:hover .argmc-tab-number,
div.argmc-wrapper .argmc-tab-item.last.current+.argmc-tab-item:hover .argmc-tab-number,
.slick-dots li button:hover,
.wpb_column.et-light-column .postline:before,
.wpb_column.et-light-column .postline-medium:before,
.wpb_column.et-light-column .postline-large:before,
.et-feat-video-btn:hover .et-featured-video-icon:after,
.post.type-post.sticky .entry-title a:after {
  background-color: #b9a16b;
}

div.argmc-wrapper .argmc-tab-item.visited:before {
  border-bottom-color: #b9a16b;
}

.yith-wcan-loading:after,
.blockUI.blockOverlay:after,
.easyzoom-notice:after,
.woocommerce-product-gallery__wrapper .slick:after,
.add_to_cart_button.loading:after,
.et-loader:after {
  background-color: #b9a16b;
}

.fancy-title,
h1.fancy-title,
h2.fancy-title,
h3.fancy-title,
h4.fancy-title,
h5.fancy-title,
h6.fancy-title {
  color: #b9a16b
}

.fancy-tag,
h1.fancy-tag,
h2.fancy-tag,
h3.fancy-tag,
h4.fancy-tag,
h5.fancy-tag,
h6.fancy-tag {
  background-color: #282828
}

@media only screen and (max-width:991px) {
  .site-header .header-mobile {
    display: block !important;
  }

  .site-header .header-main,
  .site-header .header-bottom {
    display: none !important;
  }
}

@media only screen and (min-width:992px) {

  .site-header,
  .header-spacer,
  .product-header-spacer {
    height: 95px;
  }

  .page-header-transparent .hero-header .hero-title {
    padding-top: 95px;
  }

  .et-product-detail.et-product-layout-no-padding.product-header-transparent .showcase-inner .product-information {
    padding-top: 95px;
  }

  .header_on_scroll:not(.megamenu-active) .site-header,
  .header_on_scroll:not(.megamenu-active) .header-spacer,
  .header_on_scroll:not(.megamenu-active) .product-header-spacer {
    height: 70px;
  }
}

@media only screen and (max-width:991px) {

  .site-header,
  .header_on_scroll .site-header,
  .header-spacer,
  .product-header-spacer {
    height: 60px;
  }

  .page-header-transparent .hero-header .hero-title {
    padding-top: 60px;
  }
}

@media screen and (min-width:576px) and (max-width:767px) {
  .sticky-product-bar {
    height: 60px;
  }

  .product-bar-visible.single-product.fixed-product-bar-bottom .footer {
    margin-bottom: 60px;
  }

  .product-bar-visible.single-product.fixed-product-bar-bottom #scroll_to_top.active {
    bottom: 70px;
  }
}

.page-header-regular .site-header,
.header_on_scroll .site-header {
  background-color: #ffffff;
}

@media only screen and (max-width:576px) {
  .page-header-transparent:not(.header-transparent-mobiles):not(.header_on_scroll) .site-header {
    background-color: #ffffff;
  }
}

.site-header a,
.site-header .menu-toggle,
.site-header .goya-search button {
  color: #000000;
}

@media only screen and (max-width:767px) {

  .sticky-header-light .site-header .menu-toggle:hover,
  .header-transparent-mobiles.sticky-header-light.header_on_scroll .site-header a.icon,
  .header-transparent-mobiles.sticky-header-light.header_on_scroll .site-header .menu-toggle,
  .header-transparent-mobiles.light-title:not(.header_on_scroll) .site-header a.icon,
  .header-transparent-mobiles.light-title:not(.header_on_scroll) .site-header .menu-toggle {
    color: #ffffff;
  }
}

@media only screen and (min-width:768px) {

  .light-title:not(.header_on_scroll) .site-header .site-title,
  .light-title:not(.header_on_scroll) .site-header .et-header-menu>li>a,
  .sticky-header-light.header_on_scroll .site-header .et-header-menu>li>a,
  .light-title:not(.header_on_scroll) span.minicart-counter.et-count-zero,
  .sticky-header-light.header_on_scroll .site-header .icon,
  .sticky-header-light.header_on_scroll .site-header .menu-toggle,
  .light-title:not(.header_on_scroll) .site-header .icon,
  .light-title:not(.header_on_scroll) .site-header .menu-toggle {
    color: #ffffff;
  }
}

.et-header-menu .menu-label,
.mobile-menu .menu-label {
  background-color: #aaaaaa;
}

.et-header-menu ul.sub-menu:before,
.et-header-menu .sub-menu .sub-menu {
  background-color: #ffffff !important;
}

.et-header-menu>li.menu-item-has-children>a:after {
  border-bottom-color: #ffffff;
}

.et-header-menu .sub-menu li.menu-item-has-children:after,
.et-header-menu ul.sub-menu li a {
  color: #444444;
}

.side-panel .mobile-bar,
.side-panel .mobile-bar.dark {
  background: #f8f8f8;
}

.side-mobile-menu,
.side-mobile-menu.dark {
  background: #ffffff;
}

.side-fullscreen-menu,
.side-fullscreen-menu.dark {
  background: #ffffff;
}
.icon {
  width: 30px !important;
  height: 30px !important;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.site-footer,
.site-footer.dark {
  background-color: #ffffff;
}

.site-footer .footer-bar.custom-color-1,
.site-footer .footer-bar.custom-color-1.dark {
  background-color: #2d2d2d;
}

.mfp #et-quickview {
  max-width: 960px;
}

.woocommerce-Tabs-panel.custom_scroll {
  max-height: 400px;
}

.product_meta .trap {
  display: none !important;
}

.shop-widget-scroll .widget>ul,
.shop-widget-scroll .widget:not(.widget-woof)>.widgettitle+*,
.shop-widget-scroll .wcapf-layered-nav {
  max-height: 150px;
}

.free-shipping-progress-bar .progress-bar-indicator {
  background: linear-gradient(270deg, #b9a16b 0, #ffffff 200%);
  background-color: #b9a16b;
  flex-grow: 1;
}

.rtl .free-shipping-progress-bar .progress-bar-indicator {
  background: linear-gradient(90deg, #b9a16b 0, #ffffff 200%);
}

.progress-bar-status.success .progress-bar-indicator {
  background: #67bb67;
}

.star-rating>span:before,
.comment-form-rating .stars>span:before {
  color: #282828;
}

.product-inner .badge.onsale,
.wc-block-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-onsale {
  color: #ef5c5c;
  background-color: #ffffff;
}

.et-product-detail .summary .badge.onsale {
  border-color: #ef5c5c;
}

.product-inner .badge.new {
  color: #585858;
  background-color: #ffffff;
}

.product-inner .badge.out-of-stock {
  color: #585858;
  background-color: #ffffff;
}

@media screen and (min-width:768px) {
  .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image {
    margin-top: 5px;
  }

  .wc-block-grid__products .wc-block-grid__product:hover .wc-block-grid__product-image {
    transform: translateY(-5px);
  }
}

.et-blog.hero-header .hero-title {
  background-color: #f8f8f8;
}

.post.post-detail.hero-title .post-featured.title-wrap {
  background-color: #f8f8f8;
}

.has-gutenberg-white-color {
  color: #ffffff !important;
}

.has-gutenberg-white-background-color {
  background-color: #ffffff;
}

.wp-block-button.outlined .has-gutenberg-white-color {
  border-color: #ffffff !important;
  background-color: transparent !important;
}

.has-gutenberg-shade-color {
  color: #f8f8f8 !important;
}

.has-gutenberg-shade-background-color {
  background-color: #f8f8f8;
}

.wp-block-button.outlined .has-gutenberg-shade-color {
  border-color: #f8f8f8 !important;
  background-color: transparent !important;
}

.has-gutenberg-gray-color {
  color: #777777 !important;
}

.has-gutenberg-gray-background-color {
  background-color: #777777;
}

.wp-block-button.outlined .has-gutenberg-gray-color {
  border-color: #777777 !important;
  background-color: transparent !important;
}

.has-gutenberg-dark-color {
  color: #282828 !important;
}

.has-gutenberg-dark-background-color {
  background-color: #282828;
}

.wp-block-button.outlined .has-gutenberg-dark-color {
  border-color: #282828 !important;
  background-color: transparent !important;
}

.has-gutenberg-accent-color {
  color: #b9a16b !important;
}

.has-gutenberg-accent-background-color {
  background-color: #b9a16b;
}

.wp-block-button.outlined .has-gutenberg-accent-color {
  border-color: #b9a16b !important;
  background-color: transparent !important;
}

.commentlist .bypostauthor>.comment-body .fn:after {
  content: 'Autore del post';
}

.et-inline-validation-notices .form-row.woocommerce-invalid-required-field:after {
  content: 'Campo richiesto';
}

.post.type-post.sticky .entry-title a:after {
  content: 'In primo piano';
}
</style>
<style>
.pagodil-sticker-container {
  display: inline-block;
  margin-bottom: 60px;
}
</style>
<style>
.woocommerce-product-gallery {
  opacity: 1 !important;
}
</style>
<style>
body.custom-background #wrapper {
  background-color: #ffffff;
}
</style>
<style id="wp-custom-css">
@media only screen and (min-width: 1490px) {
  .et-product-detail .showcase-active .summary h1.product_title {
    font-size: 38px;
  }
}

@media only screen and (max-width: 768px) {
  .et-product-detail .showcase-active .summary h1.product_title {
    font-size: 24px;
  }
}

p.stock.in-stock {
  display: none;
}

.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
  display: none;
}

.product-type-variable .woocommerce-variation-description {
  display: none;
}

@media (orientation: portrait) {
  .woo-variation-gallery-wrapper .woo-variation-gallery-slider img {
    display: inline-block;
    box-sizing: border-box;
    height: auto;
    width: 92%;
    max-width: 92%;
    vertical-align: middle;
    margin: 0 !important;
  }
}

.term-description,
.shop-intro-text {
  display: none;
}

small.includes_tax {
  display: none !important;
}

.order-total .includes_tax {
  display: none;
}

.shipped_via,
.includes_tax {
  display: none;
}

.my_account_tracking {
  font-size: 12px;
}

#payment .payment_methods li.wc_payment_method img {
  max-width: 120px;
}

.order-again {
  margin: 0;
  padding-top: 33px;
  text-align: right;
  display: none;
}

.ast_track,
.pay,
.cancel {
  display: none;
}

.woocommerce-breadcrumb {
  display: none;
}

.woocommerce-product-attributes {
  display: none;
}

#tab-additional_information {
  display: none;
}
</style>
<style id="kirki-inline-styles">
.site-header,
.header-spacer,
.product-header-spacer {
  height: 95px;
}

.site-header .logolink img {
  max-height: 52px;
}

.top-bar .search-field,
.top-bar .search-button-group select {
  height: 40px;
}

.top-bar {
  min-height: 40px;
  background-color: #282828;
}

.top-bar,
.top-bar a,
.top-bar button,
.top-bar .selected {
  color: #eeeeee;
}

.search-button-group .search-clear:before,
.search-button-group .search-clear:after {
  background-color: #eeeeee;
}

.et-global-campaign {
  min-height: 40px;
  color: #ffffff;
  background-color: #81d8d0;
}

.et-global-campaign .et-close:before,
.et-global-campaign .et-close:after,
.no-touch .et-global-campaign .et-close:hover:before,
.no-touch .et-global-campaign .et-close:hover:after {
  background-color: #ffffff;
}

.campaign-inner .link-button {
  color: #ffffff;
}

.side-panel .mobile-bar,
.side-panel .mobile-bar.dark {
  background-color: #f8f8f8;
}

.side-fullscreen-menu,
.side-fullscreen-menu.dark {
  background-color: #ffffff;
}
.product_thumbnail img {
    width: 100%;
}
.side-mobile-menu li,
.side-mobile-menu li a,
.side-mobile-menu .bottom-extras,
.side-mobile-menu .bottom-extras a,
.side-mobile-menu .selected {
  color: #282828;
}

.side-menu.side-mobile-menu,
.side-menu.side-mobile-menu.dark {
  background-color: #ffffff;
}

.site-footer,
.site-footer.dark {
  background-color: #ffffff;
}

.mfp-wrap.quick-search .mfp-content [type="submit"],
.et-close,
.single-product .pswp__button:hover,
.content404 h4,
.woocommerce-tabs .tabs li a span,
.woo-variation-gallery-wrapper .woo-variation-gallery-trigger:hover:after,
.mobile-menu li.menu-item-has-children.active>.et-menu-toggle:after,
.remove:hover,
a.remove:hover,
.minicart-counter.et-count-zero,
.tag-cloud-link .tag-link-count,
.wpmc-tabs-wrapper li.wpmc-tab-item.current,
div.argmc-wrapper .tab-completed-icon:before,
.et-wp-gallery-popup .mfp-arrow {
  color: #b9a16b;
}

.slick-dots li.slick-active button {
  background-color: #b9a16b;
}

body,
table,
.shop_table,
blockquote cite,
.et-listing-style1 .product_thumbnail .et-quickview-btn,
.products .single_add_to_cart_button.button,
.products .add_to_cart_button.button,
.products .added_to_cart.button,
.side-panel header h6 {
  color: #686868;
}

.cart-collaterals .woocommerce-shipping-destination strong,
#order_review .shop_table,
#payment .payment_methods li label,
.et-product-detail .summary .variations label,
.woocommerce-tabs .tabs li a:hover,
.woocommerce-tabs .tabs li.active a,
.et-product-detail .product_meta>span *,
.sticky-product-bar .variations label,
.et-product-detail .summary .sizing_guide,
#side-cart .woocommerce-mini-cart__total,
.woocommerce-Price-amount,
.cart-collaterals .shipping-calculator-button,
.woocommerce-terms-and-conditions-wrapper a,
.et-checkout-login-title a,
.et-checkout-coupon-title a,
.woocommerce-checkout h3,
.order_review_heading,
.woocommerce-Address-title h3,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend,
.et-product-detail.et-cart-mixed .summary .yith-wcwl-add-to-wishlist>div>a,
.et-product-detail.et-cart-stacked .summary .yith-wcwl-add-to-wishlist>div>a,
.hentry table th,
.entry-content table th,
#reviews .commentlist li .comment-text .meta strong,
.et-feat-video-btn,
#ship-to-different-address label,
.woocommerce-account-fields p.create-account label,
.et-login-wrapper a,
.floating-labels .form-row.float-label input:focus~label,
.floating-labels .form-row.float-label textarea:focus~label,
.woocommerce-info,
.order_details li strong,
table.order_details th,
table.order_details a:not(.button),
.variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.selected,
.woocommerce-MyAccount-content p a:not(.button),
.woocommerce-MyAccount-content header a,
.woocommerce-MyAccount-navigation ul li a,
.et-MyAccount-user-info .et-username strong,
.woocommerce-MyAccount-content .shop_table tr th,
mark,
.woocommerce-MyAccount-content strong,
.product_list_widget a,
.search-panel .search-field,
.goya-search .search-button-group select,
.widget .slider-values p span {
  color: #282828;
}

input[type=radio]:checked:before,
input[type=checkbox]:checked,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.widget .noUi-horizontal .noUi-base .noUi-origin:first-child {
  background-color: #282828;
}

label:hover input[type=checkbox],
label:hover input[type=radio],
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input.input-text:focus,
select:focus,
textarea:focus {
  border-color: #282828;
}

input[type=checkbox]:checked {
  border-color: #282828 !important;
}

.et-product-detail .summary .yith-wcwl-add-to-wishlist a .icon svg,
.sticky-product-bar .yith-wcwl-add-to-wishlist a .icon svg {
  stroke: #282828;
}

.et-product-detail .summary .yith-wcwl-wishlistaddedbrowse a svg,
.et-product-detail .summary .yith-wcwl-wishlistexistsbrowse a svg,
.sticky-product-bar .yith-wcwl-wishlistaddedbrowse a svg,
.sticky-product-bar .yith-wcwl-wishlistexistsbrowse a svg {
  fill: #282828;
}

.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.widget .wcapf-layered-nav ul li .count,
.category_bar .header-active-filters,
#reviews .commentlist li .comment-text .woocommerce-review__verified,
#reviews .commentlist li .comment-text .woocommerce-review__published-date,
.woof_container_inner h4,
#side-filters .header-active-filters .active-filters-title,
#side-filters .widget h6,
.sliding-menu .sliding-menu-back,
.type-post .post-meta {
  color: #999999;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #282828;
}

.yith-wcan-loading:after,
.blockUI.blockOverlay:after,
.easyzoom-notice:after,
.woocommerce-product-gallery__wrapper .slick:after,
.add_to_cart_button.loading:after,
.et-loader:after,
.wcapf-before-update:after,
#side-filters.ajax-loader .side-panel-content:after {
  background-color: #b9a16b;
}

.et-page-load-overlay .dot3-loader {
  color: #b9a16b;
}

.button,
input[type=submit],
button[type=submit],
#side-filters .et-close,
.nf-form-cont .nf-form-content .submit-wrap .ninja-forms-field,
.yith-wcwl-popup-footer a.button.wishlist-submit {
  background-color: #282828;
}

.button,
.button:hover,
button[type=submit],
button[type=submit]:hover,
input[type=submit],
input[type=submit]:hover,
.nf-form-cont .nf-form-content .submit-wrap .ninja-forms-field,
.nf-form-cont .nf-form-content .submit-wrap .ninja-forms-field:hover,
.yith-wcwl-popup-footer a.button.wishlist-submit {
  color: #ffffff;
}

.button.outlined,
.button.outlined:hover,
.button.outlined:focus,
.button.outlined:active,
.woocommerce-Reviews .comment-reply-title:hover {
  color: #282828;
}

.fancy-title {
  color: #b9a16b;
}

.fancy-tag {
  background-color: #282828;
}

.page-header-regular .site-header,
.header_on_scroll .site-header {
  background-color: #ffffff;
}

.site-header .goya-search button,
.site-header .et-switcher-container .selected,
.site-header .et-header-text,
.site-header .product.wcml-dropdown li>a,
.site-header .product.wcml-dropdown .wcml-cs-active-currency>a,
.site-header .product.wcml-dropdown .wcml-cs-active-currency:hover>a,
.site-header .product.wcml-dropdown .wcml-cs-active-currency:focus>a,
.site-header .menu-toggle,
.site-header a {
  color: #000000;
}

.et-header-menu .menu-label {
  background-color: #aaaaaa;
}

.et-header-menu ul.sub-menu li a {
  color: #444444;
}

.et-header-menu .sub-menu .sub-menu,
.et-header-menu ul.sub-menu:before {
  background-color: #ffffff;
}

.et-header-menu>li.menu-item-has-children>a:after {
  border-bottom-color: #ffffff;
}

.et-product-detail .single_add_to_cart_button,
.sticky-product-bar .single_add_to_cart_button,
.sticky-product-bar .add_to_cart_button,
.woocommerce-mini-cart__buttons .button.checkout,
.button.checkout-button,
#place_order.button,
.woocommerce .argmc-wrapper .argmc-nav-buttons .argmc-submit,
.wishlist_table .add_to_cart {
  background-color: #000000;
}

.woocommerce-mini-cart__buttons .button:not(.checkout) {
  color: #000000;
}

.product-showcase-light-text .showcase-inner .single_add_to_cart_button {
  background-color: #ffffff;
}

.product-showcase-light-text .et-product-detail .single_add_to_cart_button {
  color: #181818;
}

.shop_bar button,
.shop_bar .woocommerce-ordering .select2-container--default .select2-selection--single,
.shop_bar .shop-filters .orderby,
.shop_bar .woocommerce-ordering:after {
  color: #282828;
}

.products .product-title h3 a,
.et-product-detail .summary h1 {
  color: #282828;
}

.products .product_after_title .price ins,
.products .product_after_title .price>.amount,
.price ins,
.price>.amount,
.price del,
.price .woocommerce-Price-amount {
  color: #777777;
}

.star-rating>span:before,
.comment-form-rating .stars>span:before {
  color: #282828;
}

.product-inner .badge.onsale,
.wc-block-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-onsale {
  color: #ef5c5c;
  background-color: #ffffff;
}

.et-product-detail .summary .badge.onsale {
  border-color: #ef5c5c;
}

.product-inner .badge.new {
  background-color: #ffffff;
}

.product-inner .badge.out-of-stock {
  color: #585858;
  background-color: #ffffff;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input.input-text,
select,
textarea,
.wp-block-button__link,
.nf-form-cont .nf-form-content .list-select-wrap .nf-field-element>div,
.nf-form-cont .nf-form-content input:not([type="button"]),
.nf-form-cont .nf-form-content textarea,
.nf-form-cont .nf-form-content .submit-wrap .ninja-forms-field,
.button,
.comment-form-rating,
.woocommerce a.ywsl-social,
.login a.ywsl-social,
input[type=submit],
.select2.select2-container--default .select2-selection--single,
.woocommerce .woocommerce-MyAccount-content .shop_table .woocommerce-button,
.woocommerce .sticky-product-bar .quantity,
.woocommerce .et-product-detail .summary .quantity,
.et-product-detail .summary .yith-wcwl-add-to-wishlist>div>a,
.wishlist_table .add_to_cart.button,
.yith-wcwl-add-button a.add_to_wishlist,
.yith-wcwl-popup-button a.add_to_wishlist,
.wishlist_table a.ask-an-estimate-button,
.wishlist-title a.show-title-form,
.hidden-title-form a.hide-title-form,
.woocommerce .yith-wcwl-wishlist-new button,
.wishlist_manage_table a.create-new-wishlist,
.wishlist_manage_table button.submit-wishlist-changes,
.yith-wcwl-wishlist-search-form button.wishlist-search-button,
#side-filters.side-panel .et-close,
.site-header .search-button-group {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

body,
blockquote cite {
  font-family: Work Sans;
  font-weight: 500;
  line-height: 1.7;
}

.site-header .main-navigation,
.site-header .secondary-navigation,
h1,
.page-header .page-title,
.entry-header .entry-title,
.et-shop-title,
.product-showcase.product-title-top .product_title,
.et-product-detail .summary h1.product_title,
.entry-title.blog-title,
.post.post-detail .entry-header .entry-title,
.post.post-detail .post-featured .entry-header .entry-title,
.wp-block-cover .wp-block-cover-text,
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image h2,
.revslider-slide-title,
blockquote h1,
blockquote h2,
blockquote h3,
blockquote h4,
blockquote h5,
blockquote h6,
blockquote p,
.post-sidebar .widget>h6,
.hentry h2,
.entry-content h2,
.mfp-content h2,
.footer h2,
.entry-content h3,
.hentry h3,
.mfp-content h3,
.footer h3,
.entry-content h4,
.hentry h4,
.mfp-content h4,
.footer h4,
.post .post-title h3,
.products .product .product-title h2,
.et-portfolio .type-portfolio h3,
.et-banner-text .et-banner-title,
.woocommerce-order-received h2,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-checkout h3,
.order_review_heading,
.woocommerce-MyAccount-content legend,
.et-portfolio .type-portfolio h3,
.related h2,
.up-sells h2,
.cross-sells h2,
.cart-collaterals h5,
.cart-collaterals h3,
.cart-collaterals h2,
.related-posts .related-title,
.et_post_nav .post_nav_link h3,
.comments-container .comments-title,
.product-details-accordion .woocommerce-Reviews-title,
.et-hovercard .et-pricing-head {
  font-family: Work Sans;
  font-weight: 600;
}

body,
blockquote cite,
div.vc_progress_bar .vc_single_bar .vc_label,
div.vc_toggle_size_sm .vc_toggle_title h4 {
  font-size: 16px;
}

.wp-caption-text,
.woocommerce-breadcrumb,
.post.listing .listing_content .post-meta,
.footer-bar .footer-bar-content,
.side-menu .mobile-widgets p,
.side-menu .side-widgets p,
.products .product.product-category a div h2 .count,
#payment .payment_methods li .payment_box,
#payment .payment_methods li a.about_paypal,
.et-product-detail .summary .sizing_guide,
#reviews .commentlist li .comment-text .woocommerce-review__verified,
#reviews .commentlist li .comment-text .woocommerce-review__published-date,
.commentlist>li .comment-meta,
.widget .type-post .post-meta,
.widget_rss .rss-date,
.wp-block-latest-comments__comment-date,
.wp-block-latest-posts__post-date,
.commentlist>li .reply,
.comment-reply-title small,
.commentlist .bypostauthor .post-author,
.commentlist .bypostauthor>.comment-body .fn:after,
.et-portfolio.et-portfolio-style-hover-card .type-portfolio .et-portfolio-excerpt {
  font-size: 14px;
}

@media only screen and (min-width: 992px) {
  .header_on_scroll:not(.megamenu-active) .site-header {
    height: 70px;
  }

  .header_on_scroll:not(.megamenu-active) .site-header .logolink img,
  .header_on_scroll.megamenu-active .site-header .alt-logo-sticky img {
    max-height: 24px;
  }
}

@media only screen and (max-width: 991px) {

  .header-spacer,
  .header_on_scroll .site-header,
  .product-header-spacer,
  .site-header,
  .sticky-product-bar {
    height: 60px;
  }

  .site-header .logolink img {
    max-height: 35px;
  }
}

@media only screen and (max-width: 767px) {

  .header-transparent-mobiles.light-title:not(.header_on_scroll) .site-header .menu-toggle,
  .header-transparent-mobiles.light-title:not(.header_on_scroll) .site-header a.icon,
  .header-transparent-mobiles.sticky-header-light.header_on_scroll .site-header .menu-toggle,
  .header-transparent-mobiles.sticky-header-light.header_on_scroll .site-header a.icon,
  .sticky-header-light .site-header .menu-toggle:hover {
    color: #ffffff;
  }
}

@media only screen and (min-width: 768px) {

  .light-title:not(.header_on_scroll) .site-header .site-title,
  .light-title:not(.header_on_scroll) .site-header .et-header-menu>li>a,
  .sticky-header-light.header_on_scroll .site-header .et-header-menu>li>a,
  .light-title:not(.header_on_scroll) span.minicart-counter.et-count-zero,
  .sticky-header-light.header_on_scroll .site-header .et-header-text,
  .sticky-header-light.header_on_scroll .site-header .et-header-text a,
  .light-title:not(.header_on_scroll) .site-header .et-header-text,
  .light-title:not(.header_on_scroll) .site-header .et-header-text a,
  .sticky-header-light.header_on_scroll .site-header .icon,
  .light-title:not(.header_on_scroll) .site-header .icon,
  .sticky-header-light.header_on_scroll .site-header .menu-toggle,
  .light-title:not(.header_on_scroll) .site-header .menu-toggle,
  .sticky-header-light.header_on_scroll .site-header .et-switcher-container .selected,
  .light-title:not(.header_on_scroll) .site-header .et-switcher-container .selected,
  .light-title:not(.header_on_scroll) .site-header .product.wcml-dropdown li>a,
  .light-title:not(.header_on_scroll) .site-header .product.wcml-dropdown .wcml-cs-active-currency>a,
  .light-title:not(.header_on_scroll) .site-header .product.wcml-dropdown .wcml-cs-active-currency:hover>a,
  .light-title:not(.header_on_scroll) .site-header .product.wcml-dropdown .wcml-cs-active-currency:focus>a,
  .sticky-header-light.header_on_scroll .site-header .product.wcml-dropdown li>a,
  .sticky-header-light.header_on_scroll .site-header .product.wcml-dropdown .wcml-cs-active-currency>a,
  .sticky-header-light.header_on_scroll .site-header .product.wcml-dropdown .wcml-cs-active-currency:hover>a,
  .sticky-header-light.header_on_scroll .site-header .product.wcml-dropdown .wcml-cs-active-currency:focus>a {
    color: #ffffff;
  }

  .products:not(.shop_display_list) .et-listing-style4 .after_shop_loop_actions .button {
    background-color: #000000;
  }
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBiAJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBiEJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBi8JoI3ZKyHqQg.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBiAJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBiEJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBi8JoI3ZKyHqQg.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBiAJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBiEJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBi8JoI3ZKyHqQg.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBiAJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBiEJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBi8JoI3ZKyHqQg.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBiAJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBiEJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBi8JoI3ZKyHqQg.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBiAJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBiEJoI3ZKyHqQvhf.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://www.becafashion.com/crmebimage/public/product/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBi8JoI3ZKyHqQg.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<style data-type="vc_shortcodes-custom-css">
.vc_custom_1579142078604 {
  margin-top: 35px !important;
  margin-bottom: 35px !important;
}

.vc_custom_1579142078604 {
  margin-top: 35px !important;
  margin-bottom: 35px !important;
}

.vc_custom_1579142113600 {
  margin-top: 60px !important;
  margin-bottom: 40px !important;
}

.vc_custom_1579111637642 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  background-color: #f1e8df !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.vc_custom_1579111652347 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.vc_custom_1617057806589 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617057819865 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  padding-top: 60px !important;
  padding-right: 10% !important;
  padding-bottom: 60px !important;
  padding-left: 10% !important;
  background-color: #c7ab62 !important;
}

.vc_custom_1617057590037 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617057800405 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617057725714 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617057733718 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617057675701 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058395904 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  background-color: #c7ab62 !important;
}

.vc_custom_1621766226575 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058454694 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058490640 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058481597 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058463485 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058553165 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058499973 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058530060 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058509933 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058539016 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1617058521209 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.vc_custom_1556305572662 {
  margin-bottom: 0px !important;
}
</style>
<style>
.wpb_animate_when_almost_visible {
  opacity: 1;
}
</style>
<style data-id="immersive-translate-input-injected-css">
.immersive-translate-input {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2147483647;
  display: flex;
  justify-content: center;
  align-items: center;
}

.immersive-translate-attach-loading::after {
  content: " ";

  --loading-color: #f78fb6;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  margin: 12px auto;
  position: relative;
  color: white;
  left: -100px;
  box-sizing: border-box;
  animation: immersiveTranslateShadowRolling 1.5s linear infinite;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-2000%, -50%);
  z-index: 100;
}

.immersive-translate-loading-spinner {
  vertical-align: middle !important;
  width: 10px !important;
  height: 10px !important;
  display: inline-block !important;
  margin: 0 4px !important;
  border: 2px rgba(221, 244, 255, 0.6) solid !important;
  border-top: 2px rgba(0, 0, 0, 0.375) solid !important;
  border-left: 2px rgba(0, 0, 0, 0.375) solid !important;
  border-radius: 50% !important;
  padding: 0 !important;
  -webkit-animation: immersive-translate-loading-animation 0.6s infinite linear !important;
  animation: immersive-translate-loading-animation 0.6s infinite linear !important;
}

@-webkit-keyframes immersive-translate-loading-animation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}

@keyframes immersive-translate-loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.immersive-translate-input-loading {
  --loading-color: #f78fb6;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  margin: 12px auto;
  position: relative;
  color: white;
  left: -100px;
  box-sizing: border-box;
  animation: immersiveTranslateShadowRolling 1.5s linear infinite;
}

@keyframes immersiveTranslateShadowRolling {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }

  12% {
    box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0),
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }

  25% {
    box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color),
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }

  36% {
    box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color),
      100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color),
      110px 0 var(--loading-color), 100px 0 var(--loading-color);
  }

  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color),
      120px 0 var(--loading-color), 110px 0 var(--loading-color);
  }

  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
      130px 0 var(--loading-color), 120px 0 var(--loading-color);
  }

  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
      200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color);
  }

  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
      200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

.immersive-translate-toast {
  display: flex;
  position: fixed;
  z-index: 2147483647;
  left: 0;
  right: 0;
  top: 1%;
  width: fit-content;
  padding: 12px 20px;
  margin: auto;
  overflow: auto;
  background: #fef6f9;
  box-shadow: 0px 4px 10px 0px rgba(0, 10, 30, 0.06);
  font-size: 15px;
  border-radius: 8px;
  color: #333;
}

.immersive-translate-toast-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.immersive-translate-toast-hidden {
  margin: 0 20px 0 72px;
  text-decoration: underline;
  cursor: pointer;
}

.immersive-translate-toast-close {
  color: #666666;
  font-size: 20px;
  font-weight: bold;
  padding: 0 10px;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .immersive-translate-toast {
    top: 0;
    padding: 12px 0px 0 10px;
  }

  .immersive-translate-toast-content {
    flex-direction: column;
    text-align: center;
  }

  .immersive-translate-toast-hidden {
    margin: 10px auto;
  }
}

.immersive-translate-modal {
  display: none;
  position: fixed;
  z-index: 2147483647;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 15px;
}

.immersive-translate-modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 40px 24px 24px;
  border-radius: 12px;
  width: 350px;
  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  position: relative;
}

@media screen and (max-width: 768px) {
  .immersive-translate-modal-content {
    margin: 50% auto !important;
  }
}

.immersive-translate-modal .immersive-translate-modal-content-in-input {
  max-width: 500px;
}

.immersive-translate-modal-content-in-input .immersive-translate-modal-body {
  text-align: left;
  max-height: unset;
}

.immersive-translate-modal-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #333333;
}

.immersive-translate-modal-body {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-top: 24px;
}

@media screen and (max-width: 768px) {
  .immersive-translate-modal-body {
    max-height: 250px;
    overflow-y: auto;
  }
}

.immersive-translate-close {
  color: #666666;
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 20px;
  font-weight: bold;
}

.immersive-translate-close:hover,
.immersive-translate-close:focus {
  text-decoration: none;
  cursor: pointer;
}

.immersive-translate-modal-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.immersive-translate-btn {
  width: fit-content;
  color: #fff;
  background-color: #ea4c89;
  border: none;
  font-size: 14px;
  margin: 0 8px;
  padding: 9px 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.immersive-translate-btn:hover {
  background-color: #f082ac;
}

.immersive-translate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.immersive-translate-btn:disabled:hover {
  background-color: #ea4c89;
}

.immersive-translate-cancel-btn {
  /* gray color */
  background-color: rgb(89, 107, 120);
}

.immersive-translate-cancel-btn:hover {
  background-color: hsl(205, 20%, 32%);
}

.immersive-translate-action-btn {
  background-color: transparent;
  color: #ea4c89;
  border: 1px solid #ea4c89;
}

.immersive-translate-btn svg {
  margin-right: 5px;
}

.immersive-translate-link {
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  text-decoration: none;
  color: #007bff;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.immersive-translate-primary-link {
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  text-decoration: none;
  color: #ea4c89;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.immersive-translate-modal input[type="radio"] {
  margin: 0 6px;
  cursor: pointer;
}

.immersive-translate-modal label {
  cursor: pointer;
}

.immersive-translate-close-action {
  position: absolute;
  top: 2px;
  right: 0px;
  cursor: pointer;
}

.imt-image-status {
  background-color: rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
}

.imt-image-status img,
.imt-image-status svg,
.imt-img-loading {
  width: 28px !important;
  height: 28px !important;
  margin: 0 0 8px 0 !important;
  min-height: 28px !important;
  min-width: 28px !important;
  position: relative !important;
}

.imt-img-loading {
  background-image: url("");
  background-size: 28px 28px;
  animation: image-loading-rotate 1s linear infinite !important;
}

.imt-image-status span {
  color: var(--bg-2, #fff) !important;
  font-size: 14px !important;
  line-height: 14px !important;
  font-weight: 500 !important;
  font-family: "PingFang SC", Arial, sans-serif !important;
}

@keyframes image-loading-rotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}
</style>
<style>
@charset "UTF-8";

#mount {
  --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --line-height: 1.5;
  --font-weight: 400;
  --font-size: 16px;
  --border-radius: 0.25rem;
  --border-width: 1px;
  --outline-width: 3px;
  --spacing: 1rem;
  --typography-spacing-vertical: 1.5rem;
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
  --grid-spacing-vertical: 0;
  --grid-spacing-horizontal: var(--spacing);
  --form-element-spacing-vertical: 0.75rem;
  --form-element-spacing-horizontal: 1rem;
  --nav-element-spacing-vertical: 1rem;
  --nav-element-spacing-horizontal: 0.5rem;
  --nav-link-spacing-vertical: 0.5rem;
  --nav-link-spacing-horizontal: 0.5rem;
  --form-label-font-weight: var(--font-weight);
  --transition: 0.2s ease-in-out;
  --modal-overlay-backdrop-filter: blur(0.25rem);
}

@media (min-width: 576px) {
  #mount {
    --font-size: 17px;
  }
}

@media (min-width: 768px) {
  #mount {
    --font-size: 18px;
  }
}

@media (min-width: 992px) {
  #mount {
    --font-size: 19px;
  }
}

@media (min-width: 1200px) {
  #mount {
    --font-size: 20px;
  }
}

@media (min-width: 576px) {

  #mount>header,
  #mount>main,
  #mount>footer,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 2);
  }
}

@media (min-width: 768px) {

  #mount>header,
  #mount>main,
  #mount>footer,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 2.5);
  }
}

@media (min-width: 992px) {

  #mount>header,
  #mount>main,
  #mount>footer,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 3);
  }
}

@media (min-width: 1200px) {

  #mount>header,
  #mount>main,
  #mount>footer,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 3.5);
  }
}

@media (min-width: 576px) {
  article {
    --block-spacing-horizontal: calc(var(--spacing) * 1.25);
  }
}

@media (min-width: 768px) {
  article {
    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
  }
}

@media (min-width: 992px) {
  article {
    --block-spacing-horizontal: calc(var(--spacing) * 1.75);
  }
}

@media (min-width: 1200px) {
  article {
    --block-spacing-horizontal: calc(var(--spacing) * 2);
  }
}

dialog>article {
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
}

@media (min-width: 576px) {
  dialog>article {
    --block-spacing-vertical: calc(var(--spacing) * 2.5);
    --block-spacing-horizontal: calc(var(--spacing) * 1.25);
  }
}

@media (min-width: 768px) {
  dialog>article {
    --block-spacing-vertical: calc(var(--spacing) * 3);
    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
  }
}

a {
  --text-decoration: none;
}

a.secondary,
a.contrast {
  --text-decoration: underline;
}

small {
  --font-size: 0.875em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --font-weight: 700;
}

h1 {
  --font-size: 2rem;
  --typography-spacing-vertical: 3rem;
}

h2 {
  --font-size: 1.75rem;
  --typography-spacing-vertical: 2.625rem;
}

h3 {
  --font-size: 1.5rem;
  --typography-spacing-vertical: 2.25rem;
}

h4 {
  --font-size: 1.25rem;
  --typography-spacing-vertical: 1.874rem;
}

h5 {
  --font-size: 1.125rem;
  --typography-spacing-vertical: 1.6875rem;
}

[type="checkbox"],
[type="radio"] {
  --border-width: 2px;
}

[type="checkbox"][role="switch"] {
  --border-width: 2px;
}

thead th,
thead td,
tfoot th,
tfoot td {
  --border-width: 3px;
}

:not(thead, tfoot)>*>td {
  --font-size: 0.875em;
}

pre,
code,
kbd,
samp {
  --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
    "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

kbd {
  --font-weight: bolder;
}

[data-theme="light"],
#mount:not([data-theme="dark"]) {
  --background-color: #fff;
  --background-light-green: #f5f7f9;
  --color: hsl(205deg, 20%, 32%);
  --h1-color: hsl(205deg, 30%, 15%);
  --h2-color: #24333e;
  --h3-color: hsl(205deg, 25%, 23%);
  --h4-color: #374956;
  --h5-color: hsl(205deg, 20%, 32%);
  --h6-color: #4d606d;
  --muted-color: hsl(205deg, 10%, 50%);
  --muted-border-color: hsl(205deg, 20%, 94%);
  --primary: hsl(195deg, 85%, 41%);
  --primary-hover: hsl(195deg, 90%, 32%);
  --primary-focus: rgba(16, 149, 193, 0.125);
  --primary-inverse: #fff;
  --secondary: hsl(205deg, 15%, 41%);
  --secondary-hover: hsl(205deg, 20%, 32%);
  --secondary-focus: rgba(89, 107, 120, 0.125);
  --secondary-inverse: #fff;
  --contrast: hsl(205deg, 30%, 15%);
  --contrast-hover: #000;
  --contrast-focus: rgba(89, 107, 120, 0.125);
  --contrast-inverse: #fff;
  --mark-background-color: #fff2ca;
  --mark-color: #543a26;
  --ins-color: #388e3c;
  --del-color: #c62828;
  --blockquote-border-color: var(--muted-border-color);
  --blockquote-footer-color: var(--muted-color);
  --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --form-element-background-color: transparent;
  --form-element-border-color: hsl(205deg, 14%, 68%);
  --form-element-color: var(--color);
  --form-element-placeholder-color: var(--muted-color);
  --form-element-active-background-color: transparent;
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
  --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
  --form-element-disabled-opacity: 0.5;
  --form-element-invalid-border-color: #c62828;
  --form-element-invalid-active-border-color: #d32f2f;
  --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
  --form-element-valid-border-color: #388e3c;
  --form-element-valid-active-border-color: #43a047;
  --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
  --switch-background-color: hsl(205deg, 16%, 77%);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
  --range-border-color: hsl(205deg, 18%, 86%);
  --range-active-border-color: hsl(205deg, 16%, 77%);
  --range-thumb-border-color: var(--background-color);
  --range-thumb-color: var(--secondary);
  --range-thumb-hover-color: var(--secondary-hover);
  --range-thumb-active-color: var(--primary);
  --table-border-color: var(--muted-border-color);
  --table-row-stripped-background-color: #f6f8f9;
  --code-background-color: hsl(205deg, 20%, 94%);
  --code-color: var(--muted-color);
  --code-kbd-background-color: var(--contrast);
  --code-kbd-color: var(--contrast-inverse);
  --code-tag-color: hsl(330deg, 40%, 50%);
  --code-property-color: hsl(185deg, 40%, 40%);
  --code-value-color: hsl(40deg, 20%, 50%);
  --code-comment-color: hsl(205deg, 14%, 68%);
  --accordion-border-color: var(--muted-border-color);
  --accordion-close-summary-color: var(--color);
  --accordion-open-summary-color: var(--muted-color);
  --card-background-color: var(--background-color);
  --card-border-color: var(--muted-border-color);
  --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
    0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
    0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
  --card-sectionning-background-color: #fbfbfc;
  --dropdown-background-color: #fbfbfc;
  --dropdown-border-color: #e1e6eb;
  --dropdown-box-shadow: var(--card-box-shadow);
  --dropdown-color: var(--color);
  --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
  --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
  --progress-background-color: hsl(205deg, 18%, 86%);
  --progress-color: var(--primary);
  --loading-spinner-opacity: 0.5;
  --tooltip-background-color: var(--contrast);
  --tooltip-color: var(--contrast-inverse);
  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTguOTM0OCA4LjY0ODQ0QzIwLjg5NDEgOC42NDg0NCAyMi40ODU1IDcuMDU0NjkgMjIuNDg1NSA1LjA5NzY2QzIyLjQ4NTUgMy4xNDA2MiAyMC44OTE4IDEuNTQ2ODggMTguOTM0OCAxLjU0Njg4QzE2Ljk3NTQgMS41NDY4OCAxNS4zODQgMy4xNDA2MiAxNS4zODQgNS4wOTc2NkMxNS4zODQgNS4yOTkyMiAxNS40MDA0IDUuNDkzNzUgMTUuNDMzMiA1LjY4NTk0TDcuMzIzODMgOS4zNTM5MUM2LjcwOTc3IDguODQ1MzEgNS45MjIyNyA4LjU0MDYyIDUuMDY0NDUgOC41NDA2MkMzLjEwNTA4IDguNTQwNjIgMS41MTM2NyAxMC4xMzQ0IDEuNTEzNjcgMTIuMDkxNEMxLjUxMzY3IDE0LjA0ODQgMy4xMDc0MiAxNS42NDIyIDUuMDY0NDUgMTUuNjQyMkM1LjgzMzIgMTUuNjQyMiA2LjU0NTcgMTUuMzk2MSA3LjEyNjk1IDE0Ljk4MTNMMTIuNDk0MSAxNy45OTUzQzEyLjQxNjggMTguMjg1OSAxMi4zNzcgMTguNTg4MyAxMi4zNzcgMTguOTAyM0MxMi4zNzcgMjAuODYxNyAxMy45NzA3IDIyLjQ1MzEgMTUuOTI3NyAyMi40NTMxQzE3Ljg4NzEgMjIuNDUzMSAxOS40Nzg1IDIwLjg1OTQgMTkuNDc4NSAxOC45MDIzQzE5LjQ3ODUgMTYuOTQzIDE3Ljg4NDggMTUuMzUxNiAxNS45Mjc3IDE1LjM1MTZDMTQuOTU3NCAxNS4zNTE2IDE0LjA3ODUgMTUuNzQzIDEzLjQzNjMgMTYuMzczNEw4LjMyMjI3IDEzLjUwNDdDOC41MDk3NyAxMy4wNzExIDguNjE1MjMgMTIuNTk1MyA4LjYxNTIzIDEyLjA5MzhDOC42MTUyMyAxMS42ODEyIDguNTQ0OTIgMTEuMjg3NSA4LjQxNjAyIDEwLjkxOTVMMTYuMjIzIDcuMzg3NUMxNi44NzQ2IDguMTU2MjUgMTcuODQ5NiA4LjY0ODQ0IDE4LjkzNDggOC42NDg0NFpNNS4wNjQ0NSAxMy43Njk1QzQuMTQxMDIgMTMuNzY5NSAzLjM4ODY3IDEzLjAxNzIgMy4zODg2NyAxMi4wOTM4QzMuMzg4NjcgMTEuMTcwMyA0LjE0MTAyIDEwLjQxOCA1LjA2NDQ1IDEwLjQxOEM1Ljk4Nzg5IDEwLjQxOCA2Ljc0MDIzIDExLjE3MDMgNi43NDAyMyAxMi4wOTM4QzYuNzQwMjMgMTMuMDE3MiA1Ljk4Nzg5IDEzLjc2OTUgNS4wNjQ0NSAxMy43Njk1Wk0xNS45Mjc3IDE3LjIyNjZDMTYuODUxMiAxNy4yMjY2IDE3LjYwMzUgMTcuOTc4OSAxNy42MDM1IDE4LjkwMjNDMTcuNjAzNSAxOS44MjU4IDE2Ljg1MTIgMjAuNTc4MSAxNS45Mjc3IDIwLjU3ODFDMTUuMDA0MyAyMC41NzgxIDE0LjI1MiAxOS44MjU4IDE0LjI1MiAxOC45MDIzQzE0LjI1MiAxNy45Nzg5IDE1LjAwMiAxNy4yMjY2IDE1LjkyNzcgMTcuMjI2NlpNMTguOTM0OCAzLjQxOTUzQzE5Ljg1ODIgMy40MTk1MyAyMC42MTA1IDQuMTcxODcgMjAuNjEwNSA1LjA5NTMxQzIwLjYxMDUgNi4wMTg3NSAxOS44NTgyIDYuNzcxMDkgMTguOTM0OCA2Ljc3MTA5QzE4LjAxMTMgNi43NzEwOSAxNy4yNTkgNi4wMTg3NSAxNy4yNTkgNS4wOTUzMUMxNy4yNTkgNC4xNzE4NyAxOC4wMTEzIDMuNDE5NTMgMTguOTM0OCAzLjQxOTUzWicgZmlsbD0nIzgzODM4MycvPjwvc3ZnPiA=");
  --float-ball-more-button-border-color: #f6f6f6;
  --float-ball-more-button-background-color: #ffffff;
  --float-ball-more-button-svg-color: #6c6f73;
  color-scheme: light;
  --service-bg-hover: #f7faff;
  --service-bg: #fafbfb;
}

@media only screen and (prefers-color-scheme: dark) {
  #mount:not([data-theme="light"]) {
    --background-color: #11191f;
    --float-ball-more-button-background-color: #ffffff;
    --background-light-green: #141e26;
    --color: hsl(205deg, 16%, 77%);
    --h1-color: hsl(205deg, 20%, 94%);
    --h2-color: #e1e6eb;
    --h3-color: hsl(205deg, 18%, 86%);
    --h4-color: #c8d1d8;
    --h5-color: hsl(205deg, 16%, 77%);
    --h6-color: #afbbc4;
    --muted-color: hsl(205deg, 10%, 50%);
    --muted-border-color: #1f2d38;
    --primary: hsl(195deg, 85%, 41%);
    --primary-hover: hsl(195deg, 80%, 50%);
    --primary-focus: rgba(16, 149, 193, 0.25);
    --primary-inverse: #fff;
    --secondary: hsl(205deg, 15%, 41%);
    --secondary-hover: hsl(205deg, 10%, 50%);
    --secondary-focus: rgba(115, 130, 140, 0.25);
    --secondary-inverse: #fff;
    --contrast: hsl(205deg, 20%, 94%);
    --contrast-hover: #fff;
    --contrast-focus: rgba(115, 130, 140, 0.25);
    --contrast-inverse: #000;
    --mark-background-color: #d1c284;
    --mark-color: #11191f;
    --ins-color: #388e3c;
    --del-color: #c62828;
    --blockquote-border-color: var(--muted-border-color);
    --blockquote-footer-color: var(--muted-color);
    --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --form-element-background-color: #11191f;
    --form-element-border-color: #374956;
    --form-element-color: var(--color);
    --form-element-placeholder-color: var(--muted-color);
    --form-element-active-background-color: var(--form-element-background-color);
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
    --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
    --form-element-disabled-opacity: 0.5;
    --form-element-invalid-border-color: #b71c1c;
    --form-element-invalid-active-border-color: #c62828;
    --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
    --form-element-valid-border-color: #2e7d32;
    --form-element-valid-active-border-color: #388e3c;
    --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
    --switch-background-color: #374956;
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
    --range-border-color: #24333e;
    --range-active-border-color: hsl(205deg, 25%, 23%);
    --range-thumb-border-color: var(--background-color);
    --range-thumb-color: var(--secondary);
    --range-thumb-hover-color: var(--secondary-hover);
    --range-thumb-active-color: var(--primary);
    --table-border-color: var(--muted-border-color);
    --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
    --code-background-color: #18232c;
    --code-color: var(--muted-color);
    --code-kbd-background-color: var(--contrast);
    --code-kbd-color: var(--contrast-inverse);
    --code-tag-color: hsl(330deg, 30%, 50%);
    --code-property-color: hsl(185deg, 30%, 50%);
    --code-value-color: hsl(40deg, 10%, 50%);
    --code-comment-color: #4d606d;
    --accordion-border-color: var(--muted-border-color);
    --accordion-active-summary-color: var(--primary);
    --accordion-close-summary-color: var(--color);
    --accordion-open-summary-color: var(--muted-color);
    --card-background-color: #141e26;
    --card-border-color: var(--card-background-color);
    --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
      0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
      0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
      0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
      0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
      0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
    --card-sectionning-background-color: #18232c;
    --dropdown-background-color: hsl(205deg, 30%, 15%);
    --dropdown-border-color: #24333e;
    --dropdown-box-shadow: var(--card-box-shadow);
    --dropdown-color: var(--color);
    --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
    --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
    --progress-background-color: #24333e;
    --progress-color: var(--primary);
    --loading-spinner-opacity: 0.5;
    --tooltip-background-color: var(--contrast);
    --tooltip-color: var(--contrast-inverse);
    --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA=");
    color-scheme: dark;
    --service-bg-hover: #22292f;
    --service-bg: rgba(0, 0, 0, 0.1);
  }
}

[data-theme="dark"] {
  --background-color: #11191f;
  --float-ball-more-button-background-color: #ffffff;
  --background-light-green: #141e26;
  --color: hsl(205deg, 16%, 77%);
  --h1-color: hsl(205deg, 20%, 94%);
  --h2-color: #e1e6eb;
  --h3-color: hsl(205deg, 18%, 86%);
  --h4-color: #c8d1d8;
  --h5-color: hsl(205deg, 16%, 77%);
  --h6-color: #afbbc4;
  --muted-color: hsl(205deg, 10%, 50%);
  --muted-border-color: #1f2d38;
  --primary: hsl(195deg, 85%, 41%);
  --primary-hover: hsl(195deg, 80%, 50%);
  --primary-focus: rgba(16, 149, 193, 0.25);
  --primary-inverse: #fff;
  --secondary: hsl(205deg, 15%, 41%);
  --secondary-hover: hsl(205deg, 10%, 50%);
  --secondary-focus: rgba(115, 130, 140, 0.25);
  --secondary-inverse: #fff;
  --contrast: hsl(205deg, 20%, 94%);
  --contrast-hover: #fff;
  --contrast-focus: rgba(115, 130, 140, 0.25);
  --contrast-inverse: #000;
  --mark-background-color: #d1c284;
  --mark-color: #11191f;
  --ins-color: #388e3c;
  --del-color: #c62828;
  --blockquote-border-color: var(--muted-border-color);
  --blockquote-footer-color: var(--muted-color);
  --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --form-element-background-color: #11191f;
  --form-element-border-color: #374956;
  --form-element-color: var(--color);
  --form-element-placeholder-color: var(--muted-color);
  --form-element-active-background-color: var(--form-element-background-color);
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
  --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
  --form-element-disabled-opacity: 0.5;
  --form-element-invalid-border-color: #b71c1c;
  --form-element-invalid-active-border-color: #c62828;
  --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
  --form-element-valid-border-color: #2e7d32;
  --form-element-valid-active-border-color: #388e3c;
  --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
  --switch-background-color: #374956;
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
  --range-border-color: #24333e;
  --range-active-border-color: hsl(205deg, 25%, 23%);
  --range-thumb-border-color: var(--background-color);
  --range-thumb-color: var(--secondary);
  --range-thumb-hover-color: var(--secondary-hover);
  --range-thumb-active-color: var(--primary);
  --table-border-color: var(--muted-border-color);
  --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
  --code-background-color: #18232c;
  --code-color: var(--muted-color);
  --code-kbd-background-color: var(--contrast);
  --code-kbd-color: var(--contrast-inverse);
  --code-tag-color: hsl(330deg, 30%, 50%);
  --code-property-color: hsl(185deg, 30%, 50%);
  --code-value-color: hsl(40deg, 10%, 50%);
  --code-comment-color: #4d606d;
  --accordion-border-color: var(--muted-border-color);
  --accordion-active-summary-color: var(--primary);
  --accordion-close-summary-color: var(--color);
  --accordion-open-summary-color: var(--muted-color);
  --card-background-color: #141e26;
  --card-border-color: var(--card-background-color);
  --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
    0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
  --card-sectionning-background-color: #18232c;
  --dropdown-background-color: hsl(205deg, 30%, 15%);
  --dropdown-border-color: #24333e;
  --dropdown-box-shadow: var(--card-box-shadow);
  --dropdown-color: var(--color);
  --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
  --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
  --progress-background-color: #24333e;
  --progress-color: var(--primary);
  --loading-spinner-opacity: 0.5;
  --tooltip-background-color: var(--contrast);
  --tooltip-color: var(--contrast-inverse);
  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA=");
  color-scheme: dark;
  --service-bg: rgba(0, 0, 0, 0.1);
}

progress,
[type="checkbox"],
[type="radio"],
[type="range"] {
  accent-color: var(--primary);
}

/**
     * Document
     * Content-box & Responsive typography
     */
*,
*::before,
*::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:where(#mount) {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--background-color);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--font-family);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  cursor: default;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

/**
     * Sectioning
     * Container and responsive spacings for header, main, footer
     */
main {
  display: block;
}

#mount {
  width: 100%;
  margin: 0;
}

#mount>header,
#mount>main,
#mount>footer {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
}

@media (min-width: 576px) {

  #mount>header,
  #mount>main,
  #mount>footer {
    padding: 2px !important;
  }
}

@media (min-width: 992px) {

  #mount>header,
  #mount>main,
  #mount>footer {
    padding: 0 12px !important;
  }
}

@media (min-width: 1200px) {

  #mount>header,
  #mount>main,
  #mount>footer {
    padding: 0 24px !important;
  }
}


section {
  margin-bottom: var(--block-spacing-vertical);
}

/**
    * Grid
    * Minimal grid system with auto-layout columns
    */
.grid {
  grid-column-gap: var(--grid-spacing-horizontal);
  grid-row-gap: var(--grid-spacing-vertical);
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}

@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
  }
}

.grid>* {
  min-width: 0;
}

/**
     * Horizontal scroller (<figure>)
     */
figure {
  display: block;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

figure figcaption {
  padding: calc(var(--spacing) * 0.5) 0;
  color: var(--muted-color);
}

/**
     * Typography
     */
b,
strong {
  font-weight: bolder;
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical);
  color: var(--color);
  font-style: normal;
  font-weight: var(--font-weight);
  font-size: var(--font-size);
}

a,
[role="link"] {
  --color: var(--primary);
  --background-color: transparent;
  outline: none;
  background-color: var(--background-color);
  color: var(--color);
  -webkit-text-decoration: var(--text-decoration);
  text-decoration: var(--text-decoration);
  transition: background-color var(--transition), color var(--transition),
    box-shadow var(--transition), -webkit-text-decoration var(--transition);
  transition: background-color var(--transition), color var(--transition),
    text-decoration var(--transition), box-shadow var(--transition);
  transition: background-color var(--transition), color var(--transition),
    text-decoration var(--transition), box-shadow var(--transition),
    -webkit-text-decoration var(--transition);
}

a:is([aria-current], :hover, :active, :focus),
[role="link"]:is([aria-current], :hover, :active, :focus) {
  --color: var(--primary-hover);
  --text-decoration: underline;
}

a:focus,
[role="link"]:focus {
  --background-color: var(--primary-focus);
}

a.secondary,
[role="link"].secondary {
  --color: var(--secondary);
}

a.secondary:is([aria-current], :hover, :active, :focus),
[role="link"].secondary:is([aria-current], :hover, :active, :focus) {
  --color: var(--secondary-hover);
}

a.secondary:focus,
[role="link"].secondary:focus {
  --background-color: var(--secondary-focus);
}

a.contrast,
[role="link"].contrast {
  --color: var(--contrast);
}

a.contrast:is([aria-current], :hover, :active, :focus),
[role="link"].contrast:is([aria-current], :hover, :active, :focus) {
  --color: var(--contrast-hover);
}

a.contrast:focus,
[role="link"].contrast:focus {
  --background-color: var(--contrast-focus);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  font-family: var(--font-family);
}

h1 {
  --color: var(--h1-color);
}

h2 {
  --color: var(--h2-color);
}

h3 {
  --color: var(--h3-color);
}

h4 {
  --color: var(--h4-color);
}

h5 {
  --color: var(--h5-color);
}

h6 {
  --color: var(--h6-color);
}

:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul)~ :is(h1, h2, h3, h4, h5, h6) {
  margin-top: var(--typography-spacing-vertical);
}

hgroup,
.headings {
  margin-bottom: var(--typography-spacing-vertical);
}

hgroup>*,
.headings>* {
  margin-bottom: 0;
}

hgroup>*:last-child,
.headings>*:last-child {
  --color: var(--muted-color);
  --font-weight: unset;
  font-size: 1rem;
  font-family: unset;
}

p {
  margin-bottom: var(--typography-spacing-vertical);
}

small {
  font-size: var(--font-size);
}

:where(dl, ol, ul) {
  padding-right: 0;
  padding-left: var(--spacing);
  -webkit-padding-start: var(--spacing);
  padding-inline-start: var(--spacing);
  -webkit-padding-end: 0;
  padding-inline-end: 0;
}

:where(dl, ol, ul) li {
  margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}

:where(dl, ol, ul) :is(dl, ol, ul) {
  margin: 0;
  margin-top: calc(var(--typography-spacing-vertical) * 0.25);
}

ul li {
  list-style: square;
}

mark {
  padding: 0.125rem 0.25rem;
  background-color: var(--mark-background-color);
  color: var(--mark-color);
  vertical-align: baseline;
}

blockquote {
  display: block;
  margin: var(--typography-spacing-vertical) 0;
  padding: var(--spacing);
  border-right: none;
  border-left: 0.25rem solid var(--blockquote-border-color);
  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
  border-inline-start: 0.25rem solid var(--blockquote-border-color);
  -webkit-border-end: none;
  border-inline-end: none;
}

blockquote footer {
  margin-top: calc(var(--typography-spacing-vertical) * 0.5);
  color: var(--blockquote-footer-color);
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}

ins {
  color: var(--ins-color);
  text-decoration: none;
}

del {
  color: var(--del-color);
}

::-moz-selection {
  background-color: var(--primary-focus);
}

::selection {
  background-color: var(--primary-focus);
}

/**
     * Embedded content
     */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

:where(iframe) {
  border-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

:where(svg:not([fill])) {
  fill: currentColor;
}

svg:not(#mount) {
  overflow: hidden;
}

/**
     * Button
     */
button {
  margin: 0;
  overflow: visible;
  font-family: inherit;
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button {
  display: block;
  width: 100%;
  margin-bottom: var(--spacing);
}

[role="button"] {
  display: inline-block;
  text-decoration: none;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"] {
  --background-color: var(--primary);
  --border-color: var(--primary);
  --color: var(--primary-inverse);
  --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}


button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
[role="button"]:focus {
  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--outline-width) var(--primary-focus);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).secondary,
input[type="reset"] {
  --background-color: var(--secondary);
  --border-color: var(--secondary);
  --color: var(--secondary-inverse);
  cursor: pointer;
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).secondary:is([aria-current], :hover, :active, :focus),
input[type="reset"]:is([aria-current], :hover, :active, :focus) {
  --background-color: var(--secondary-hover);
  --border-color: var(--secondary-hover);
  --color: var(--secondary-inverse);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).secondary:focus,
input[type="reset"]:focus {
  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--outline-width) var(--secondary-focus);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).contrast {
  --background-color: var(--contrast);
  --border-color: var(--contrast);
  --color: var(--contrast-inverse);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
  --background-color: var(--contrast-hover);
  --border-color: var(--contrast-hover);
  --color: var(--contrast-inverse);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).contrast:focus {
  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--outline-width) var(--contrast-focus);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).outline,
input[type="reset"].outline {
  --background-color: transparent;
  --color: var(--primary);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).outline:is([aria-current], :hover, :active, :focus),
input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
  --background-color: transparent;
  --color: var(--primary-hover);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).outline.secondary,
input[type="reset"].outline {
  --color: var(--secondary);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).outline.secondary:is([aria-current], :hover, :active, :focus),
input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
  --color: var(--secondary-hover);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).outline.contrast {
  --color: var(--contrast);
}

:is(button,
  input[type="submit"],
  input[type="button"],
  [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
  --color: var(--contrast-hover);
}

.button,
input[type=submit],
button[type=submit],
#side-filters .et-close,
.nf-form-cont .nf-form-content .submit-wrap .ninja-forms-field,
.yith-wcwl-popup-footer a.button.wishlist-submit {
  background-color: #282828;
}

:where(button,
  [type="submit"],
  [type="button"],
  [type="reset"],
  [role="button"])[disabled],
:where(fieldset[disabled]) :is(button,
  [type="submit"],
  [type="button"],
  [type="reset"],
  [role="button"]),
a[role="button"]:not([href]) {
  opacity: 0.5;
  pointer-events: none;
}

/**
     * Form elements
     */
input,
optgroup,
select,
textarea {
  margin: 0;
  font-size: 1rem;
  line-height: var(--line-height);
  font-family: inherit;
  letter-spacing: inherit;
}

input {
  overflow: visible;
}

select {
  text-transform: none;
}

legend {
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

:-moz-focusring {
  outline: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

::-ms-expand {
  display: none;
}

[type="file"],
[type="range"] {
  padding: 0;
  border-width: 0;
}



fieldset {
  margin: 0;
  margin-bottom: var(--spacing);
  padding: 0;
  border: 0;
}

label,
fieldset legend {
  display: block;
  margin-bottom: calc(var(--spacing) * 0.25);
  font-weight: var(--form-label-font-weight, var(--font-weight));
}


input,
select,
textarea {
  --background-color: var(--form-element-background-color);
  --border-color: var(--form-element-border-color);
  --color: var(--form-element-color);
  --box-shadow: none;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}


:where(input, select, textarea):not([type="checkbox"],
  [type="radio"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="time"],
  [type="week"])[aria-invalid] {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  padding-left: var(--form-element-spacing-horizontal);
  -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
  padding-inline-start: var(--form-element-spacing-horizontal) !important;
  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  background-position: center right 0.75rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}

:where(input, select, textarea):not([type="checkbox"],
  [type="radio"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="time"],
  [type="week"])[aria-invalid="false"] {
  background-image: var(--icon-valid);
}

:where(input, select, textarea):not([type="checkbox"],
  [type="radio"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="time"],
  [type="week"])[aria-invalid="true"] {
  background-image: var(--icon-invalid);
}

:where(input, select, textarea)[aria-invalid="false"] {
  --border-color: var(--form-element-valid-border-color);
}

:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
  --border-color: var(--form-element-valid-active-border-color) !important;
  --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
}

:where(input, select, textarea)[aria-invalid="true"] {
  --border-color: var(--form-element-invalid-border-color);
}

:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
  --border-color: var(--form-element-invalid-active-border-color) !important;
  --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
}

[dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid],
  [aria-invalid="true"],
  [aria-invalid="false"]) {
  background-position: center left 0.75rem;
}

input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
  color: var(--form-element-placeholder-color);
  opacity: 1;
}


select::-ms-expand {
  border: 0;
  background-color: transparent;
}

select:not([multiple], [size]) {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-image: var(--icon-chevron);
  background-position: center right 0.75rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}

[dir="rtl"] select:not([multiple], [size]) {
  background-position: center left 0.75rem;
}

:where(input, select, textarea)+small {
  display: block;
  width: 100%;
  margin-top: calc(var(--spacing) * -0.75);
  margin-bottom: var(--spacing);
  color: var(--muted-color);
}

label> :where(input, select, textarea) {
  margin-top: calc(var(--spacing) * 0.25);
}

/**
     * Form elements
     * Checkboxes & Radios
     */
[type="checkbox"],
[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: -0.125em;
  margin-right: 0.375em;
  margin-left: 0;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
  -webkit-margin-end: 0.375em;
  margin-inline-end: 0.375em;
  border-width: var(--border-width);
  font-size: inherit;
  vertical-align: middle;
  cursor: pointer;
}

[type="checkbox"]::-ms-check,
[type="radio"]::-ms-check {
  display: none;
}

[type="checkbox"]:checked,
[type="checkbox"]:checked:active,
[type="checkbox"]:checked:focus,
[type="radio"]:checked,
[type="radio"]:checked:active,
[type="radio"]:checked:focus {
  --background-color: var(--primary);
  --border-color: var(--primary);
  background-image: var(--icon-checkbox);
  background-position: center;
  background-size: 0.75em auto;
  background-repeat: no-repeat;
}

[type="checkbox"]~label,
[type="radio"]~label {
  display: inline-block;
  margin-right: 0.375em;
  margin-bottom: 0;
  cursor: pointer;
}

[type="checkbox"]:indeterminate {
  --background-color: var(--primary);
  --border-color: var(--primary);
  background-image: var(--icon-minus);
  background-position: center;
  background-size: 0.75em auto;
  background-repeat: no-repeat;
}

[type="radio"] {
  border-radius: 50%;
}

[type="radio"]:checked,
[type="radio"]:checked:active,
[type="radio"]:checked:focus {
  --background-color: var(--primary-inverse);
  border-width: 0.35em;
  background-image: none;
}

[type="checkbox"][role="switch"] {
  --background-color: var(--switch-background-color);
  --border-color: var(--switch-background-color);
  --color: var(--switch-color);
  width: 2.25em;
  height: 1.25em;
  border: var(--border-width) solid var(--border-color);
  border-radius: 1.25em;
  background-color: var(--background-color);
  line-height: 1.25em;
}

[type="checkbox"][role="switch"]:focus {
  --background-color: var(--switch-background-color);
  --border-color: var(--switch-background-color);
}

[type="checkbox"][role="switch"]:checked {
  --background-color: var(--switch-checked-background-color);
  --border-color: var(--switch-checked-background-color);
}

[type="checkbox"][role="switch"]:before {
  display: block;
  width: calc(1.25em - (var(--border-width) * 2));
  height: 100%;
  border-radius: 50%;
  background-color: var(--color);
  content: "";
  transition: margin 0.1s ease-in-out;
}

[type="checkbox"][role="switch"]:checked {
  background-image: none;
}

[type="checkbox"][role="switch"]:checked::before {
  margin-left: calc(1.125em - var(--border-width));
  -webkit-margin-start: calc(1.125em - var(--border-width));
  margin-inline-start: calc(1.125em - var(--border-width));
}

[type="checkbox"][aria-invalid="false"],
[type="checkbox"]:checked[aria-invalid="false"],
[type="radio"][aria-invalid="false"],
[type="radio"]:checked[aria-invalid="false"],
[type="checkbox"][role="switch"][aria-invalid="false"],
[type="checkbox"][role="switch"]:checked[aria-invalid="false"] {
  --border-color: var(--form-element-valid-border-color);
}

[type="checkbox"][aria-invalid="true"],
[type="checkbox"]:checked[aria-invalid="true"],
[type="radio"][aria-invalid="true"],
[type="radio"]:checked[aria-invalid="true"],
[type="checkbox"][role="switch"][aria-invalid="true"],
[type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
  --border-color: var(--form-element-invalid-border-color);
}

/**
     * Form elements
     * Alternatives input types (Not Checkboxes & Radios)
     */
[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

[type="color"]::-moz-focus-inner {
  padding: 0;
}

[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--border-radius) * 0.5);
}

[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: calc(var(--border-radius) * 0.5);
}


[type="date"]::-webkit-calendar-picker-indicator,
[type="datetime-local"]::-webkit-calendar-picker-indicator,
[type="month"]::-webkit-calendar-picker-indicator,
[type="time"]::-webkit-calendar-picker-indicator,
[type="week"]::-webkit-calendar-picker-indicator {
  width: var(--icon-width);
  margin-right: calc(var(--icon-width) * -1);
  margin-left: var(--icon-position);
  opacity: 0;
}

[dir="rtl"] :is([type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="time"],
  [type="week"]) {
  text-align: right;
}

[type="file"] {
  --color: var(--muted-color);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
  border: 0;
  border-radius: 0;
  background: none;
}

[type="file"]::file-selector-button {
  --background-color: var(--secondary);
  --border-color: var(--secondary);
  --color: var(--secondary-inverse);
  margin-right: calc(var(--spacing) / 2);
  margin-left: 0;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
  -webkit-margin-end: calc(var(--spacing) / 2);
  margin-inline-end: calc(var(--spacing) / 2);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}

[type="file"]::file-selector-button:is(:hover, :active, :focus) {
  --background-color: var(--secondary-hover);
  --border-color: var(--secondary-hover);
}

[type="file"]::-webkit-file-upload-button {
  --background-color: var(--secondary);
  --border-color: var(--secondary);
  --color: var(--secondary-inverse);
  margin-right: calc(var(--spacing) / 2);
  margin-left: 0;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
  -webkit-margin-end: calc(var(--spacing) / 2);
  margin-inline-end: calc(var(--spacing) / 2);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: center;
  cursor: pointer;
  -webkit-transition: background-color var(--transition),
    border-color var(--transition), color var(--transition),
    box-shadow var(--transition);
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}

[type="file"]::-webkit-file-upload-button:is(:hover, :active, :focus) {
  --background-color: var(--secondary-hover);
  --border-color: var(--secondary-hover);
}

[type="file"]::-ms-browse {
  --background-color: var(--secondary);
  --border-color: var(--secondary);
  --color: var(--secondary-inverse);
  margin-right: calc(var(--spacing) / 2);
  margin-left: 0;
  margin-inline-start: 0;
  margin-inline-end: calc(var(--spacing) / 2);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: center;
  cursor: pointer;
  -ms-transition: background-color var(--transition),
    border-color var(--transition), color var(--transition),
    box-shadow var(--transition);
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}

[type="file"]::-ms-browse:is(:hover, :active, :focus) {
  --background-color: var(--secondary-hover);
  --border-color: var(--secondary-hover);
}

[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.25rem;
  background: none;
}

[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.25rem;
  border-radius: var(--border-radius);
  background-color: var(--range-border-color);
  -webkit-transition: background-color var(--transition),
    box-shadow var(--transition);
  transition: background-color var(--transition), box-shadow var(--transition);
}

[type="range"]::-moz-range-track {
  width: 100%;
  height: 0.25rem;
  border-radius: var(--border-radius);
  background-color: var(--range-border-color);
  -moz-transition: background-color var(--transition),
    box-shadow var(--transition);
  transition: background-color var(--transition), box-shadow var(--transition);
}

[type="range"]::-ms-track {
  width: 100%;
  height: 0.25rem;
  border-radius: var(--border-radius);
  background-color: var(--range-border-color);
  -ms-transition: background-color var(--transition),
    box-shadow var(--transition);
  transition: background-color var(--transition), box-shadow var(--transition);
}

[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.5rem;
  border: 2px solid var(--range-thumb-border-color);
  border-radius: 50%;
  background-color: var(--range-thumb-color);
  cursor: pointer;
  -webkit-transition: background-color var(--transition),
    transform var(--transition);
  transition: background-color var(--transition), transform var(--transition);
}

[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.5rem;
  border: 2px solid var(--range-thumb-border-color);
  border-radius: 50%;
  background-color: var(--range-thumb-color);
  cursor: pointer;
  -moz-transition: background-color var(--transition),
    transform var(--transition);
  transition: background-color var(--transition), transform var(--transition);
}

[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.5rem;
  border: 2px solid var(--range-thumb-border-color);
  border-radius: 50%;
  background-color: var(--range-thumb-color);
  cursor: pointer;
  -ms-transition: background-color var(--transition),
    transform var(--transition);
  transition: background-color var(--transition), transform var(--transition);
}

[type="range"]:hover,
[type="range"]:focus {
  --range-border-color: var(--range-active-border-color);
  --range-thumb-color: var(--range-thumb-hover-color);
}

[type="range"]:active {
  --range-thumb-color: var(--range-thumb-active-color);
}

[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.25);
}

[type="range"]:active::-moz-range-thumb {
  transform: scale(1.25);
}

[type="range"]:active::-ms-thumb {
  transform: scale(1.25);
}


[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

[dir="rtl"] :where(input):not([type="checkbox"],
  [type="radio"],
  [type="range"],
  [type="file"])[type="search"] {
  background-position: center right 1.125rem;
}

[dir="rtl"] :where(input):not([type="checkbox"],
  [type="radio"],
  [type="range"],
  [type="file"])[type="search"][aria-invalid] {
  background-position: center right 1.125rem, center left 0.75rem;
}

/**
     * Table
     */
:where(table) {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}

th,
td {
  padding: calc(var(--spacing) / 2) var(--spacing);
  border-bottom: var(--border-width) solid var(--table-border-color);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  text-align: left;
  text-align: start;
}

tfoot th,
tfoot td {
  border-top: var(--border-width) solid var(--table-border-color);
  border-bottom: 0;
}

table[role="grid"] tbody tr:nth-child(odd) {
  background-color: var(--table-row-stripped-background-color);
}

/**
     * Code
     */
pre,
code,
kbd,
samp {
  font-size: 0.875em;
  font-family: var(--font-family);
}

pre {
  -ms-overflow-style: scrollbar;
  overflow: auto;
}

pre,
code,
kbd {
  border-radius: var(--border-radius);
  background: var(--code-background-color);
  color: var(--code-color);
  font-weight: var(--font-weight);
  line-height: initial;
}

code,
kbd {
  display: inline-block;
  padding: 0.375rem 0.5rem;
}

pre {
  display: block;
  margin-bottom: var(--spacing);
  overflow-x: auto;
}

pre>code {
  display: block;
  padding: var(--spacing);
  background: none;
  font-size: 14px;
  line-height: var(--line-height);
}

code b {
  color: var(--code-tag-color);
  font-weight: var(--font-weight);
}

code i {
  color: var(--code-property-color);
  font-style: normal;
}

code u {
  color: var(--code-value-color);
  text-decoration: none;
}

code em {
  color: var(--code-comment-color);
  font-style: normal;
}

kbd {
  background-color: var(--code-kbd-background-color);
  color: var(--code-kbd-color);
  vertical-align: baseline;
}

/**
     * Miscs
     */
hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--muted-border-color);
  color: inherit;
}

[hidden],
template {
  display: none !important;
}

canvas {
  display: inline-block;
}

/**
     * Accordion (<details>)
     */
details {
  display: block;
  margin-bottom: var(--spacing);
  padding-bottom: var(--spacing);
  border-bottom: var(--border-width) solid var(--accordion-border-color);
}

details summary {
  line-height: 1rem;
  list-style-type: none;
  cursor: pointer;
  transition: color var(--transition);
}

details summary:not([role]) {
  color: var(--accordion-close-summary-color);
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::marker {
  display: none;
}

details summary::-moz-list-bullet {
  list-style-type: none;
}

details summary::after {
  display: block;
  width: 1rem;
  height: 1rem;
  -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
  margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
  float: right;
  transform: rotate(-90deg);
  background-image: var(--icon-chevron);
  background-position: right center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  content: "";
  transition: transform var(--transition);
}

details summary:focus {
  outline: none;
}

details summary:focus:not([role="button"]) {
  color: var(--accordion-active-summary-color);
}

details summary[role="button"] {
  width: 100%;
  text-align: left;
}

details summary[role="button"]::after {
  height: calc(1rem * var(--line-height, 1.5));
  background-image: var(--icon-chevron-button);
}

details summary[role="button"]:not(.outline).contrast::after {
  background-image: var(--icon-chevron-button-inverse);
}

details[open]>summary {
  margin-bottom: calc(var(--spacing));
}

details[open]>summary:not([role]):not(:focus) {
  color: var(--accordion-open-summary-color);
}

details[open]>summary::after {
  transform: rotate(0);
}

[dir="rtl"] details summary {
  text-align: right;
}

[dir="rtl"] details summary::after {
  float: left;
  background-position: left center;
}

/**
     * Card (<article>)
     */
article {
  margin: var(--block-spacing-vertical) 0;
  padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
  border-radius: var(--border-radius);
  background: var(--card-background-color);
  box-shadow: var(--card-box-shadow);
}

article>header,
article>footer {
  margin-right: calc(var(--block-spacing-horizontal) * -1);
  margin-left: calc(var(--block-spacing-horizontal) * -1);
  padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
  background-color: var(--card-sectionning-background-color);
}

article>header {
  margin-top: calc(var(--block-spacing-vertical) * -1);
  margin-bottom: var(--block-spacing-vertical);
  border-bottom: var(--border-width) solid var(--card-border-color);
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
}

article>footer {
  margin-top: var(--block-spacing-vertical);
  margin-bottom: calc(var(--block-spacing-vertical) * -1);
  border-top: var(--border-width) solid var(--card-border-color);
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

/**
     * Modal (<dialog>)
     */
#mount {
  --scrollbar-width: 0px;
}

dialog {
  display: flex;
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: inherit;
  min-width: 100%;
  height: inherit;
  min-height: 100%;
  padding: var(--spacing);
  border: 0;
  -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
  backdrop-filter: var(--modal-overlay-backdrop-filter);
  background-color: var(--modal-overlay-background-color);
  color: var(--color);
}

dialog article {
  max-height: calc(100vh - var(--spacing) * 2);
  overflow: auto;
}

@media (min-width: 576px) {
  dialog article {
    max-width: 510px;
  }
}

@media (min-width: 768px) {
  dialog article {
    max-width: 700px;
  }
}

dialog article>header,
dialog article>footer {
  padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
}

dialog article>header .close {
  margin: 0;
  margin-left: var(--spacing);
  float: right;
}

dialog article>footer {
  text-align: right;
}

dialog article>footer [role="button"] {
  margin-bottom: 0;
}

dialog article>footer [role="button"]:not(:first-of-type) {
  margin-left: calc(var(--spacing) * 0.5);
}

dialog article p:last-of-type {
  margin: 0;
}

dialog article .close {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-top: calc(var(--block-spacing-vertical) * -0.5);
  margin-bottom: var(--typography-spacing-vertical);
  margin-left: auto;
  background-image: var(--icon-close);
  background-position: center;
  background-size: auto 1rem;
  background-repeat: no-repeat;
  opacity: 0.5;
  transition: opacity var(--transition);
}

dialog article .close:is([aria-current], :hover, :active, :focus) {
  opacity: 1;
}

dialog:not([open]),
dialog[open="false"] {
  display: none;
}

.modal-is-open {
  padding-right: var(--scrollbar-width, 0px);
  overflow: hidden;
  pointer-events: none;
}

.modal-is-open dialog {
  pointer-events: auto;
}

:where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog>article {
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

:where(.modal-is-opening, .modal-is-closing) dialog {
  animation-duration: 0.8s;
  animation-name: modal-overlay;
}

:where(.modal-is-opening, .modal-is-closing) dialog>article {
  animation-delay: 0.2s;
  animation-name: modal;
}

.modal-is-closing dialog,
.modal-is-closing dialog>article {
  animation-delay: 0s;
  animation-direction: reverse;
}

@keyframes modal-overlay {
  from {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: transparent;
  }
}

@keyframes modal {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/**
     * Nav
     */
:where(nav li)::before {
  float: left;
  content: "​";
}

nav,
nav ul {
  display: flex;
}

nav {
  justify-content: space-between;
}

nav ol,
nav ul {
  align-items: center;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

nav ol:first-of-type,
nav ul:first-of-type {
  margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
}

nav ol:last-of-type,
nav ul:last-of-type {
  margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}

nav li {
  display: inline-block;
  margin: 0;
  padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
}

nav li>* {
  --spacing: 0;
}

nav :where(a, [role="link"]) {
  display: inline-block;
  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
  border-radius: var(--border-radius);
  text-decoration: none;
}

nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
  text-decoration: none;
}

nav[aria-label="breadcrumb"] {
  align-items: center;
  justify-content: start;
}

nav[aria-label="breadcrumb"] ul li:not(:first-child) {
  -webkit-margin-start: var(--nav-link-spacing-horizontal);
  margin-inline-start: var(--nav-link-spacing-horizontal);
}

nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
  position: absolute;
  width: calc(var(--nav-link-spacing-horizontal) * 2);
  -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
  margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
  content: "/";
  color: var(--muted-color);
  text-align: center;
}

nav[aria-label="breadcrumb"] a[aria-current] {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

nav [role="button"] {
  margin-right: inherit;
  margin-left: inherit;
  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}

aside nav,
aside ol,
aside ul,
aside li {
  display: block;
}

aside li {
  padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
}

aside li a {
  display: block;
}

aside li [role="button"] {
  margin: inherit;
}

[dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
  content: "\\";
}

/**
     * Progress
     */
progress {
  display: inline-block;
  vertical-align: baseline;
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  margin-bottom: calc(var(--spacing) * 0.5);
  overflow: hidden;
  border: 0;
  border-radius: var(--border-radius);
  background-color: var(--progress-background-color);
  color: var(--progress-color);
}

progress::-webkit-progress-bar {
  border-radius: var(--border-radius);
  background: none;
}

progress[value]::-webkit-progress-value {
  background-color: var(--progress-color);
}

progress::-moz-progress-bar {
  background-color: var(--progress-color);
}

@media (prefers-reduced-motion: no-preference) {
  progress:indeterminate {
    background: var(--progress-background-color) linear-gradient(to right,
        var(--progress-color) 30%,
        var(--progress-background-color) 30%) top left/150% 150% no-repeat;
    animation: progress-indeterminate 1s linear infinite;
  }

  progress:indeterminate[value]::-webkit-progress-value {
    background-color: transparent;
  }

  progress:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"] progress:indeterminate {
    animation-direction: reverse;
  }
}

@keyframes progress-indeterminate {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/**
     * Dropdown ([role="list"])
     */
details[role="list"],
li[role="list"] {
  position: relative;
}

details[role="list"] summary+ul,
li[role="list"]>ul {
  display: flex;
  z-index: 99;
  position: absolute;
  top: auto;
  right: 0;
  left: 0;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--dropdown-border-color);
  border-radius: var(--border-radius);
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  background-color: var(--dropdown-background-color);
  box-shadow: var(--card-box-shadow);
  color: var(--dropdown-color);
  white-space: nowrap;
}

details[role="list"] summary+ul li,
li[role="list"]>ul li {
  width: 100%;
  margin-bottom: 0;
  padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
  list-style: none;
}

details[role="list"] summary+ul li:first-of-type,
li[role="list"]>ul li:first-of-type {
  margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}

details[role="list"] summary+ul li:last-of-type,
li[role="list"]>ul li:last-of-type {
  margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}

details[role="list"] summary+ul li a,
li[role="list"]>ul li a {
  display: block;
  margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
  overflow: hidden;
  color: var(--dropdown-color);
  text-decoration: none;
  text-overflow: ellipsis;
}

details[role="list"] summary+ul li a:hover,
li[role="list"]>ul li a:hover {
  background-color: var(--dropdown-hover-background-color);
}

details[role="list"] summary::after,
li[role="list"]>a::after {
  display: block;
  width: 1rem;
  height: calc(1rem * var(--line-height, 1.5));
  -webkit-margin-start: 0.5rem;
  margin-inline-start: 0.5rem;
  float: right;
  transform: rotate(0deg);
  background-position: right center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  content: "";
}

details[role="list"] {
  padding: 0;
  border-bottom: none;
}

details[role="list"] summary {
  margin-bottom: 0;
}

details[role="list"] summary:not([role]) {
  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
  border: var(--border-width) solid var(--form-element-border-color);
  border-radius: var(--border-radius);
  background-color: var(--form-element-background-color);
  color: var(--form-element-placeholder-color);
  line-height: inherit;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}

details[role="list"] summary:not([role]):active,
details[role="list"] summary:not([role]):focus {
  border-color: var(--form-element-active-border-color);
  background-color: var(--form-element-active-background-color);
}

details[role="list"] summary:not([role]):focus {
  box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}

details[role="list"][open] summary {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

details[role="list"][open] summary::before {
  display: block;
  z-index: 1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: none;
  content: "";
  cursor: default;
}

nav details[role="list"] summary,
nav li[role="list"] a {
  display: flex;
  direction: ltr;
}

nav details[role="list"] summary+ul,
nav li[role="list"]>ul {
  min-width: -moz-fit-content;
  min-width: fit-content;
  border-radius: var(--border-radius);
}

nav details[role="list"] summary+ul li a,
nav li[role="list"]>ul li a {
  border-radius: 0;
}

nav details[role="list"] summary,
nav details[role="list"] summary:not([role]) {
  height: auto;
  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}

nav details[role="list"][open] summary {
  border-radius: var(--border-radius);
}

nav details[role="list"] summary+ul {
  margin-top: var(--outline-width);
  -webkit-margin-start: 0;
  margin-inline-start: 0;
}

nav details[role="list"] summary[role="link"] {
  margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
  line-height: var(--line-height);
}

nav details[role="list"] summary[role="link"]+ul {
  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
  -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
  margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}

li[role="list"]:hover>ul,
li[role="list"] a:active~ul,
li[role="list"] a:focus~ul {
  display: flex;
}

li[role="list"]>ul {
  display: none;
  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
  -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
  margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
}

li[role="list"]>a::after {
  background-image: var(--icon-chevron);
}

/**
     * Loading ([aria-busy=true])
     */
[aria-busy="true"] {
  cursor: progress;
}

[aria-busy="true"]:not(input, select, textarea)::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 0.1875em solid currentColor;
  border-radius: 1em;
  border-right-color: transparent;
  content: "";
  vertical-align: text-bottom;
  vertical-align: -0.125em;
  animation: spinner 0.75s linear infinite;
  opacity: var(--loading-spinner-opacity);
}

[aria-busy="true"]:not(input, select, textarea):not(:empty)::before {
  margin-right: calc(var(--spacing) * 0.5);
  margin-left: 0;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
  -webkit-margin-end: calc(var(--spacing) * 0.5);
  margin-inline-end: calc(var(--spacing) * 0.5);
}

[aria-busy="true"]:not(input, select, textarea):empty {
  text-align: center;
}

button[aria-busy="true"],
input[type="submit"][aria-busy="true"],
input[type="button"][aria-busy="true"],
input[type="reset"][aria-busy="true"],
a[aria-busy="true"] {
  pointer-events: none;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/**
     * Tooltip ([data-tooltip])
     */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:not(a, button, input) {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}

[data-tooltip][data-placement="top"]::before,
[data-tooltip][data-placement="top"]::after,
[data-tooltip]::before,
[data-tooltip]::after {
  display: block;
  z-index: 99;
  position: absolute;
  bottom: 100%;
  left: 50%;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
  transform: translate(-50%, -0.25rem);
  border-radius: var(--border-radius);
  background: var(--tooltip-background-color);
  content: attr(data-tooltip);
  color: var(--tooltip-color);
  font-style: normal;
  font-weight: var(--font-weight);
  font-size: 0.875rem;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

[data-tooltip][data-placement="top"]::after,
[data-tooltip]::after {
  padding: 0;
  transform: translate(-50%, 0rem);
  border-top: 0.3rem solid;
  border-right: 0.3rem solid transparent;
  border-left: 0.3rem solid transparent;
  border-radius: 0;
  background-color: transparent;
  content: "";
  color: var(--tooltip-background-color);
}

[data-tooltip][data-placement="bottom"]::before,
[data-tooltip][data-placement="bottom"]::after {
  top: 100%;
  bottom: auto;
  transform: translate(-50%, 0.25rem);
}

[data-tooltip][data-placement="bottom"]:after {
  transform: translate(-50%, -0.3rem);
  border: 0.3rem solid transparent;
  border-bottom: 0.3rem solid;
}

[data-tooltip][data-placement="left"]::before,
[data-tooltip][data-placement="left"]::after {
  top: 50%;
  right: 100%;
  bottom: auto;
  left: auto;
  transform: translate(-0.25rem, -50%);
}

[data-tooltip][data-placement="left"]:after {
  transform: translate(0.3rem, -50%);
  border: 0.3rem solid transparent;
  border-left: 0.3rem solid;
}

[data-tooltip][data-placement="right"]::before,
[data-tooltip][data-placement="right"]::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 100%;
  transform: translate(0.25rem, -50%);
}

[data-tooltip][data-placement="right"]:after {
  transform: translate(-0.3rem, -50%);
  border: 0.3rem solid transparent;
  border-right: 0.3rem solid;
}

[data-tooltip]:focus::before,
[data-tooltip]:focus::after,
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {

  [data-tooltip][data-placement="bottom"]:focus::before,
  [data-tooltip][data-placement="bottom"]:focus::after,
  [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::before,
  [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after,
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    animation-duration: 0.2s;
    animation-name: tooltip-slide-top;
  }

  [data-tooltip][data-placement="bottom"]:focus::after,
  [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after,
  [data-tooltip]:hover::after {
    animation-name: tooltip-caret-slide-top;
  }

  [data-tooltip][data-placement="bottom"]:focus::before,
  [data-tooltip][data-placement="bottom"]:focus::after,
  [data-tooltip][data-placement="bottom"]:hover::before,
  [data-tooltip][data-placement="bottom"]:hover::after {
    animation-duration: 0.2s;
    animation-name: tooltip-slide-bottom;
  }

  [data-tooltip][data-placement="bottom"]:focus::after,
  [data-tooltip][data-placement="bottom"]:hover::after {
    animation-name: tooltip-caret-slide-bottom;
  }

  [data-tooltip][data-placement="left"]:focus::before,
  [data-tooltip][data-placement="left"]:focus::after,
  [data-tooltip][data-placement="left"]:hover::before,
  [data-tooltip][data-placement="left"]:hover::after {
    animation-duration: 0.2s;
    animation-name: tooltip-slide-left;
  }

  [data-tooltip][data-placement="left"]:focus::after,
  [data-tooltip][data-placement="left"]:hover::after {
    animation-name: tooltip-caret-slide-left;
  }

  [data-tooltip][data-placement="right"]:focus::before,
  [data-tooltip][data-placement="right"]:focus::after,
  [data-tooltip][data-placement="right"]:hover::before,
  [data-tooltip][data-placement="right"]:hover::after {
    animation-duration: 0.2s;
    animation-name: tooltip-slide-right;
  }

  [data-tooltip][data-placement="right"]:focus::after,
  [data-tooltip][data-placement="right"]:hover::after {
    animation-name: tooltip-caret-slide-right;
  }
}

@keyframes tooltip-slide-top {
  from {
    transform: translate(-50%, 0.75rem);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -0.25rem);
    opacity: 1;
  }
}

@keyframes tooltip-caret-slide-top {
  from {
    opacity: 0;
  }

  50% {
    transform: translate(-50%, -0.25rem);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 0rem);
    opacity: 1;
  }
}

@keyframes tooltip-slide-bottom {
  from {
    transform: translate(-50%, -0.75rem);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 0.25rem);
    opacity: 1;
  }
}

@keyframes tooltip-caret-slide-bottom {
  from {
    opacity: 0;
  }

  50% {
    transform: translate(-50%, -0.5rem);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -0.3rem);
    opacity: 1;
  }
}

@keyframes tooltip-slide-left {
  from {
    transform: translate(0.75rem, -50%);
    opacity: 0;
  }

  to {
    transform: translate(-0.25rem, -50%);
    opacity: 1;
  }
}

@keyframes tooltip-caret-slide-left {
  from {
    opacity: 0;
  }

  50% {
    transform: translate(0.05rem, -50%);
    opacity: 0;
  }

  to {
    transform: translate(0.3rem, -50%);
    opacity: 1;
  }
}

@keyframes tooltip-slide-right {
  from {
    transform: translate(-0.75rem, -50%);
    opacity: 0;
  }

  to {
    transform: translate(0.25rem, -50%);
    opacity: 1;
  }
}

@keyframes tooltip-caret-slide-right {
  from {
    opacity: 0;
  }

  50% {
    transform: translate(-0.05rem, -50%);
    opacity: 0;
  }

  to {
    transform: translate(-0.3rem, -50%);
    opacity: 1;
  }
}

/**
     * Accessibility & User interaction
     */
[aria-controls] {
  cursor: pointer;
}

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
}

[dir="rtl"] {
  direction: rtl;
}

/**
    * Reduce Motion Features
    */
@media (prefers-reduced-motion: reduce) {

  *:not([aria-busy="true"]),
  :not([aria-busy="true"])::before,
  :not([aria-busy="true"])::after {
    background-attachment: initial !important;
    animation-duration: 1ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}

#mount#mount {
  /* --primary: rgb(227, 59, 126); */
  --primary: #ea4c89;
  --primary-hover: #f082ac;
  --icon-xia: url("");
  --switch-checked-background-color: var(--primary);
}

li.select-link.select-link:hover>ul {
  display: none;
}

li.select-link.select-link>ul {
  display: none;
}

li.select-link.select-link a:focus~ul {
  display: none;
}

li.select-link.select-link a:active~ul {
  display: none;
}

li.select-link-active.select-link-active>ul {
  display: flex;
}

li.select-link-active.select-link-active:hover>ul {
  display: flex;
}

li.select-link-active.select-link-active a:focus~ul {
  display: flex;
}

li.select-link-active.select-link-active a:active~ul {
  display: flex;
}

ul.select-link-ul.select-link-ul {
  right: 0px;
  left: auto;
}

a.select-link-selected {
  background-color: var(--primary-focus);
}

.immersive-translate-no-select {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

/* li[role="list"].no-arrow > a::after { */
/*   background-image: none; */
/*   width: 0; */
/*   color: var(--color); */
/* } */
li[role="list"].no-arrow {
  margin-left: 8px;
  padding-right: 0;
}

li[role="list"]>a::after {
  -webkit-margin-start: 0.2rem;
  margin-inline-start: 0.2rem;
}

li[role="list"].no-arrow>a,
li[role="list"].no-arrow>a:link,
li[role="list"].no-arrow>a:visited {
  color: var(--secondary);
}

select.min-select {
  --form-element-spacing-horizontal: 0;
  margin-bottom: 4px;
  max-width: 128px;
  overflow: hidden;
  color: var(--primary);
  font-size: 13px;
  border: none;
  padding: 0;
  padding-right: 20px;
  padding-left: 8px;
  text-overflow: ellipsis;
  color: var(--color);

}

select.min-select-secondary {
  color: var(--color);
}

select.min-select:focus {
  outline: none;
  border: none;
  --box-shadow: none;
}

select.min-select-no-arrow {
  background-image: none;
  padding-right: 0;
}

select.min-select-left {
  padding-right: 0px;
  /* padding-left: 24px; */
  /* background-position: center left 0; */
  text-overflow: ellipsis;
  text-align: left;
}

.muted {
  color: var(--muted-color);
}

.select.button-select {
  --background-color: var(--secondary-hover);
  --border-color: var(--secondary-hover);
  --color: var(--secondary-inverse);
  cursor: pointer;
  --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: 16px;
  line-height: var(--line-height);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
  -webkit-appearance: button;
  margin: 0;
  margin-bottom: 0px;
  overflow: visible;
  font-family: inherit;
  text-transform: none;
}

body {
  padding: 0;
  margin: 0 auto;
  min-width: 268px;
  border-radius: 10px;
}

.popup-container {
  font-size: 16px;
  --font-size: 16px;
  color: #666;
  background-color: var(--popup-footer-background-color);
  width: 316px;
  min-width: 316px;
}

.popup-content {
  background-color: var(--popup-content-background-color);
  border-radius: 0px 0px 12px 12px;
  padding: 16px 20px;
}

.immersive-translate-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  touch-action: none;
}

.immersive-translate-popup-wrapper {
  background: var(--background-color);
  border-radius: 10px;
  border: 1px solid var(--muted-border-color);
}

#mount#mount {
  --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --line-height: 1.5;
  --font-weight: 400;
  --font-size: 16px;
  --border-radius: 4px;
  --border-width: 1px;
  --outline-width: 3px;
  --spacing: 16px;
  --typography-spacing-vertical: 24px;
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
  --grid-spacing-vertical: 0;
  --grid-spacing-horizontal: var(--spacing);
  --form-element-spacing-vertical: 12px;
  --form-element-spacing-horizontal: 16px;
  --nav-element-spacing-vertical: 16px;
  --nav-element-spacing-horizontal: 8px;
  --nav-link-spacing-vertical: 8px;
  --nav-link-spacing-horizontal: 8px;
  --form-label-font-weight: var(--font-weight);
  --transition: 0.2s ease-in-out;
  --modal-overlay-backdrop-filter: blur(4px);
}

[data-theme="light"],
#mount:not([data-theme="dark"]) {
  --popup-footer-background-color: #e8eaeb;
  --popup-content-background-color: #ffffff;
  --popup-item-background-color: #f3f5f6;
  --popup-item-hover-background-color: #eaeced;
  --popup-trial-pro-background-color: #f9fbfc;
  --text-black-2: #222222;
  --text-gray-2: #222222;
  --text-gray-6: #666666;
  --text-gray-9: #999999;
  --text-gray-c2: #c2c2c2;
  --service-select-content-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.2);
  --service-select-border-color: #fafafa;
  --service-select-selected-background-color: #f3f5f6;
}

@media only screen and (prefers-color-scheme: dark) {
  #mount:not([data-theme="light"]) {
    --popup-footer-background-color: #0d0d0d;
    --popup-content-background-color: #191919;
    --popup-item-background-color: #272727;
    --popup-item-hover-background-color: #333333;
    --popup-trial-pro-background-color: #222222;
    --text-black-2: #ffffff;
    --text-gray-2: #dbdbdb;
    --text-gray-6: #b3b3b3;
    --text-gray-9: #777777;
    --text-gray-c2: #5b5b5b;
    --service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9);
    --service-select-border-color: #2c2c2c;
    --service-select-selected-background-color: #333333;
  }
}

[data-theme="dark"] {
  --popup-footer-background-color: #0d0d0d;
  --popup-content-background-color: #191919;
  --popup-item-background-color: #272727;
  --popup-item-hover-background-color: #333333;
  --popup-trial-pro-background-color: #222222;
  --text-black-2: #ffffff;
  --text-gray-2: #dbdbdb;
  --text-gray-6: #b3b3b3;
  --text-gray-9: #777777;
  --text-gray-c2: #5b5b5b;
  --service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9);
  --service-select-border-color: #2c2c2c;
  --service-select-selected-background-color: #333333;
}

.text-balck {
  color: var(--text-black-2);
}

.text-gray-2 {
  color: var(--text-gray-2);
}

.text-gray-6 {
  color: var(--text-gray-6);
}

.text-gray-9 {
  color: var(--text-gray-9);
}

.text-gray-c2 {
  color: var(--text-gray-c2);
}

#mount {
  min-width: 268px;
}

.main-button {
  font-size: 15px;
  vertical-align: middle;
  border-radius: 12px;
  padding: unset;
  height: 44px;
  line-height: 44px;
}

.pt-4 {
  padding-top: 16px;
}

.p-2 {
  padding: 8px;
}

.pl-5 {
  padding-left: 48px;
}

.p-0 {
  padding: 0;
}

.pl-2 {
  padding-left: 8px;
}

.pl-4 {
  padding-left: 24px;
}

.pt-2 {
  padding-top: 8px;
}

.pb-2 {
  padding-bottom: 8px;
}

.pb-4 {
  padding-bottom: 16px;
}

.pb-5 {
  padding-bottom: 20px;
}

.pr-5 {
  padding-right: 48px;
}

.text-sm {
  font-size: 13px;
}

.text-base {
  font-size: 16px;
}

.w-full {
  width: 100%;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-end {
  justify-content: flex-end;
}

.flex-grow {
  flex-grow: 1;
}

.justify-between {
  justify-content: space-between;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-3 {
  margin-bottom: 12px;
}

.inline-block {
  display: inline-block;
}

.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-2-5 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.mt-0 {
  margin-top: 0;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-5 {
  margin-top: 20px;
}

.mt-6 {
  margin-top: 24px;
}

.mb-1 {
  margin-bottom: 4px;
}

.ml-4 {
  margin-left: 24px;
}

.ml-3 {
  margin-left: 16px;
}

.ml-2 {
  margin-left: 8px;
}

.ml-1 {
  margin-left: 4px;
}

.mr-1 {
  margin-right: 4px;
}

.mr-2 {
  margin-right: 8px;
}

.mr-3 {
  margin-right: 16px;
}

.mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}

.pl-3 {
  padding-left: 12px;
}

.pr-3 {
  padding-right: 12px;
}

.p-3 {
  padding: 12px;
}

.px-1 {
  padding-left: 4px;
  padding-right: 4px;
}

.px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.pt-3 {
  padding-top: 12px;
}

.px-6 {
  padding-left: 18px;
  padding-right: 18px;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.pt-6 {
  padding-top: 20px;
}

.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.left-auto {
  left: auto !important;
}

.max-h-28 {
  max-height: 112px;
}

.max-h-30 {
  max-height: 120px;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.text-xs {
  font-size: 12px;
}

.flex-1 {
  flex: 1;
}

.flex-3 {
  flex: 3;
}

.flex-4 {
  flex: 4;
}

.flex-2 {
  flex: 2;
}

.items-center {
  align-items: center;
}

.max-content {
  width: max-content;
}

.justify-center {
  justify-content: center;
}

.items-end {
  align-items: flex-end;
}

.items-baseline {
  align-items: baseline;
}

.my-5 {
  margin-top: 48px;
  margin-bottom: 48px;
}

.my-4 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.my-3 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.pt-3 {
  padding-top: 12px;
}

.px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.pt-2 {
  padding-top: 8px;
}

.px-2 {
  padding-left: 8px;
  padding-right: 8px;
}

.pt-1 {
  padding-top: 4px;
}

.px-1 {
  padding-left: 4px;
  padding-right: 4px;
}

.pb-2 {
  padding-bottom: 8px;
}

.justify-end {
  justify-content: flex-end;
}

.w-auto {
  width: auto;
}

.shrink-0 {
  flex-shrink: 0;
}

select.language-select,
select.translate-service,
select.min-select {
  --form-element-spacing-horizontal: 0;
  margin-bottom: 0px;
  max-width: unset;
  flex: 1;
  overflow: hidden;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  padding-right: 30px;
  padding-left: 0px;
  background-position: center right 12px;
  background-size: 16px auto;
  background-image: var(--icon-xia);
  text-overflow: ellipsis;
  color: var(--text-gray-2);
  background-color: transparent;
  box-shadow: unset !important;
  cursor: pointer;
}

select.more {
  background-position: center right;
  padding-right: 20px;
}

select.transform-padding-left {
  padding-left: 12px;
  transform: translateX(-12px);
  background-position: center right 0px;
}

select.translate-service {
  color: var(--text-black-2);
}

/* dark use black, for windows */
@media (prefers-color-scheme: dark) {

  select.language-select option,
  select.translate-service option,
  select.min-select option {
    background-color: #666666;
  }
}

.text-overflow-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.max-w-20 {
  max-width: 180px;
  white-space: nowrap;
}

select.min-select-secondary {
  color: var(--color);
}

select.min-select:focus {
  outline: none;
  border: none;
  --box-shadow: none;
}

select.min-select-no-arrow {
  background-image: none;
  padding-right: 0;
}

select.min-select-left {
  padding-right: 0px;
  /* padding-left: 24px; */
  /* background-position: center left 0; */
  text-overflow: ellipsis;
  text-align: left;
}

.popup-footer {
  background-color: var(--popup-footer-background-color);
  height: 40px;
}

.text-right {
  text-align: right;
}

.clickable {
  cursor: pointer;
}

.close {
  cursor: pointer;
  width: 16px;
  height: 16px;
  background-image: var(--icon-close);
  background-position: center;
  background-size: auto 1rem;
  background-repeat: no-repeat;
  opacity: 0.5;
  transition: opacity var(--transition);
}

.padding-two-column {
  padding-left: 40px;
  padding-right: 40px;
}

.muted {
  color: #999;
}

.text-label {
  color: #666;
}

.display-none {
  display: none;
}

/* dark use #18232c */
@media (prefers-color-scheme: dark) {
  .text-label {
    color: #9ca3af;
  }
}

.text-decoration-none {
  text-decoration: none;
}

.text-decoration-none:is([aria-current], :hover, :active, :focus),
[role="link"]:is([aria-current], :hover, :active, :focus) {
  --text-decoration: none !important;
  background-color: transparent !important;
}

.language-select-container {
  position: relative;
  width: 100%;
  background-color: var(--popup-item-background-color);
  height: 55px;
  border-radius: 12px;
}

select.language-select {
  color: var(--text-black-2);
  font-size: 14px;
  padding: 8px 24px 24px 16px;
  position: absolute;
  border-radius: 12px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

select.text-gray-6 {
  color: var(--text-gray-6);
}

.language-select-container label {
  position: absolute;
  bottom: 10px;
  left: 16px;
  font-size: 12px;
  color: var(--text-gray-9);
  line-height: 12px;
  margin: 0;
}

.translation-service-container {
  background-color: var(--popup-item-background-color);
  border-radius: 12px;
}

.min-select-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  background-color: var(--popup-item-background-color);
  padding-left: 16px;
}

.min-select-container:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.min-select-container:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.min-select-container:only-child {
  border-radius: 10px;
}

.translate-mode {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background-color: var(--popup-item-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.translate-mode svg {
  fill: var(--text-gray-2);
}

.widgets-container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  gap: 9px;
}

.widget-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--popup-item-background-color);
  font-size: 12px;
  min-height: 59px;
  height: 100%;
  border-radius: 8px;
  cursor: pointer;
  flex: 1;
  padding: 8px 4px;
  text-align: center;
}

.widget-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 100%;
  margin-bottom: 4px;
}

.widget-title-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 24px;
  width: 100%;
  padding-bottom: 4px;
}

.widget-icon {
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
}

.widget-title {
  color: var(--text-gray-6);
  font-size: 12px;
  text-align: center;
  width: 100%;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px 2px;
}

.widget-item svg {
  fill: var(--text-gray-2);
}

.share-button-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 2px 3px 0 8px;
}

.share-button-container svg {
  fill: var(--text-gray-9);
}

.min-select-container:hover,
.language-select-container:hover,
.widget-item:hover,
.translate-mode:hover {
  background-color: var(--popup-item-hover-background-color);
}

.main-button:hover {
  background-color: #f5508f;
}

.share-button-container:hover {
  background-color: var(--popup-item-background-color);
  border-radius: 6px;
}

.error-boundary {
  background: #fff2f0;
  border: 1px solid #ffccc7;
  display: flex;
  padding: 12px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  word-break: break-all;
  margin: 12px;
  border-radius: 12px;
  flex-direction: column;
}

.upgrade-pro {
  border-radius: 11px;
  background: linear-gradient(57deg, #272727 19.8%, #696969 82.2%);
  padding: 2px 8px;
  transform: scale(0.85);
}

.upgrade-pro span {
  background: linear-gradient(180deg, #ffeab4 17.65%, #f8c235 85.29%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 12px;
  margin-left: 4px;
}

.upgrade-pro svg {
  margin-top: -2px;
}

.upgrade-pro:hover {
  background: linear-gradient(57deg, #3d3d3d 19.8%, #949494 82.2%);
}

.border-bottom-radius-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.trial-pro-container {
  border-radius: 0px 0px 12px 12px;
  background: var(--popup-trial-pro-background-color);
  display: flex;
  align-items: center;
  height: 44px;
  padding-left: 16px;
  padding-right: 12px;
  font-size: 12px;
}

.trial-pro-container label {
  line-height: 13px;
  color: var(--text-black-2);
}

.trial-pro-container img {
  margin-left: 5px;
}

.cursor-pointer {
  cursor: pointer;
}

.upgrade-pro-discount-act {
  height: 25px;
  display: flex;
  padding: 0 4px;
  align-items: center;
  border-radius: 15px;
  background: linear-gradient(90deg,
      #cefbfa 11.33%,
      #d7f56f 63.75%,
      #fccd5e 100%);
  transform: scale(0.9);
  box-shadow: 0px 1.8px 3.6px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.upgrade-pro-discount-act span {
  font-size: 12px;
  font-weight: 700;
  margin-left: 4px;
  color: #222222;
}

.upgrade-pro-discount-act:hover {
  text-decoration: unset;
  background: linear-gradient(90deg,
      #e2fffe 11.33%,
      #e6ff91 63.75%,
      #ffdf93 100%);
}

.custom-select-container {
  width: 200px;
  position: relative;
  flex: 1;
}

#translation-service-select {
  padding-right: 12px;
  padding-left: 6px;
}

.custom-select-content {
  border-radius: 12px;
  background: var(--popup-content-background-color);
  box-shadow: var(--service-select-content-shadow);
  border: 1px solid var(--service-select-border-color);
  padding: 4px 5px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 100;
  overflow-y: auto;
}

.custom-select-item.default {
  width: 100%;
  padding: 0;
}

.custom-select-item {
  font-size: 13px;
  padding: 5px 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-black-2);
  width: auto;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
}

.custom-select-item-img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

@media (prefers-color-scheme: dark) {
  .custom-select-item-img {
    margin-right: 6px;
  }
}

.custom-select-content .custom-select-item.selected,
.custom-select-content .custom-select-item:hover {
  background: var(--service-select-selected-background-color);
}

.custom-select-item>span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-item-pro {
  font-size: 12px;
  margin-left: 6px;
}

.custom-select-item-pro img {
  margin: 0 3px;
  width: 20px;
}

.custom-select-group-header {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-gray-9);
  padding: 6px 8px 4px;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.more-container {
  position: relative;
}

.new-menu-indicator {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #ef3434;
  border-radius: 50%;
  right: 18px;
  top: 4px;
}

html {
  font-size: 17px;
}

@media print {
  .imt-fb-container {
    display: none !important;
  }
}

#mount#mount {
  position: absolute;
  display: none;
  min-width: 250px;
  height: auto;
  font-size: 17px;
}

/* float-ball */
.imt-fb-container {
  position: fixed;
  padding: 0;
  top: 335px;
  width: stretch;
  display: flex;
  flex-direction: column;
  display: none;
}

.imt-fb-container.left {
  align-items: flex-start;
  left: 0;
}

.imt-fb-container.right {
  align-items: flex-end;
  right: 0;
}

.imt-fb-btn {
  cursor: pointer;
  background: var(--float-ball-more-button-background-color);
  height: 36px;
  width: 56px;
  box-shadow: 2px 6px 10px 0px #0e121629;
}

.imt-fb-btn.left {
  border-top-right-radius: 36px;
  border-bottom-right-radius: 36px;
}

.imt-fb-btn.right {
  border-top-left-radius: 36px;
  border-bottom-left-radius: 36px;
}

.imt-fb-btn div {
  background: var(--float-ball-more-button-background-color);
  height: 36px;
  width: 54px;
  display: flex;
  align-items: center;
}

.imt-fb-btn.left div {
  border-top-right-radius: 34px;
  border-bottom-right-radius: 34px;
  justify-content: flex-end;
}

.imt-fb-btn.right div {
  border-top-left-radius: 34px;
  border-bottom-left-radius: 34px;
}

.imt-fb-logo-img {
  width: 20px;
  height: 20px;
  margin: 0 10px;
}

.imt-fb-logo-img-big-bg {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 4px;
  background-color: #ed6d8f;
  border-radius: 50%;
  margin: 0 5px;
}

.imt-float-ball-translated {
  position: absolute;
  width: 11px;
  height: 11px;
  bottom: 4px;
  right: 20px;
}

.btn-animate {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 250ms;
  transition: -webkit-transform ease-out 250ms;
  transition: transform ease-out 250ms;
  transition: transform ease-out 250ms, -webkit-transform ease-out 250ms;
}

.imt-fb-setting-btn {
  margin-right: 18px;
  width: 28px;
  height: 28px;
}

.immersive-translate-popup-wrapper {
  background: var(--background-color);
  border-radius: 20px;
  box-shadow: 2px 10px 24px 0px #0e121614;
  border: none;
}

.popup-container {
  border-radius: 20px;
}

.popup-content {
  border-radius: 20px 20px 12px 12px;
}

.popup-footer {
  border-radius: 20px;
}

.imt-fb-close-button {
  pointer-events: all;
  cursor: pointer;
  position: absolute;
  margin-top: -10px;
}

.imt-fb-close-content {
  padding: 22px;
  width: 320px;
  pointer-events: all;
}

.imt-fb-close-title {
  font-weight: 500;
  color: var(--h2-color);
}

.imt-fb-close-radio-content {
  background-color: var(--background-light-green);
  padding: 8px 20px;
}

.imt-fb-radio-sel,
.imt-fb-radio-nor {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  flex-shrink: 0;
}

.imt-fb-radio-sel {
  border: 2px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.imt-fb-radio-sel div {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--primary);
}

.imt-fb-radio-nor {
  border: 2px solid #d3d4d6;
}

.imt-fb-primary-btn {
  background-color: var(--primary);
  width: 72px;
  height: 32px;
  color: white;
  border-radius: 8px;
  text-align: center;
  line-height: 32px;
  font-size: 16px;
  cursor: pointer;
}

.imt-fb-default-btn {
  border: 1px solid var(--primary);
  width: 72px;
  height: 32px;
  border-radius: 8px;
  color: var(--primary);
  line-height: 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.imt-fb-guide-container {
  width: 312px;
  transform: translateY(-45%);
}

.imt-fb-guide-bg {
  position: absolute;
  left: 30px;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  height: 100%;
  width: 90%;
}

.imt-fb-guide-bg.left {
  transform: scaleX(-1);
}

.imt-fb-guide-content {
  margin: 16px -30px 80px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imt-fb-guide-content.left {
  margin: 16px 21px 60px 32px;
}

.imt-fb-guide-img {
  width: 220px;
  height: 112px;
}

.imt-fb-guide-message {
  font-size: 16px;
  line-height: 28px;
  color: #333333;
  white-space: pre-wrap;
  text-align: center;
  font-weight: 700;
  margin-bottom: 20px;
}

.imt-fb-guide-button {
  margin-top: 16px;
  line-height: 40px;
  height: 40px;
  padding: 0 20px;
  width: unset;
}

.imt-fb-more-buttons {
  box-shadow: 0px 2px 10px 0px #00000014;
  border: none;
  background: var(--float-ball-more-button-background-color);
  width: 36px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  margin-top: 0px;
  padding: 7px 0 7px 0;
}

.imt-fb-more-buttons>div {
  margin: auto;
}

.imt-fb-side,
.imt-fb-reward {
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  position: relative;
}

.imt-fb-side {
  margin: 10px 0;
}

.imt-fb-new-badge {
  width: 26px;
  height: 14px;
  padding: 3px;
  background-color: #f53f3f;
  border-radius: 4px;
  position: absolute;
  top: -5px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imt-fb-side *,
.imt-fb-reward * {
  pointer-events: all;
}

.imt-fb-more-button {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Sheet.css */
.immersive-translate-sheet {
  position: fixed;
  transform: translateY(100%);
  /* Start off screen */
  left: 0;
  right: 0;
  background-color: white;
  transition: transform 0.3s ease-out;
  /* Smooth slide transition */
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
  /* Ensure it's above other content */
  bottom: 0;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  overflow: hidden;
}

.immersive-translate-sheet.visible {
  transform: translateY(0);
}

.immersive-translate-sheet-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.immersive-translate-sheet-backdrop.visible {
  opacity: 1;
}

.popup-container-sheet {
  max-width: 100vw;
  width: 100vw;
}

.imt-no-events svg * {
  pointer-events: none !important;
}

.imt-manga-button {
  width: 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  margin: 0 0 10px 0;
  background-color: var(--float-ball-more-button-background-color);
  border-radius: 18px;
  filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.08));
  opacity: 0.5;
  right: 8px;
  padding: 10px 0 4px 0;
}

.imt-manga-feedback {
  cursor: pointer;
  margin-bottom: 10px;
}

.imt-fb-feedback {
  cursor: pointer;
  margin-top: 10px;
}

.imt-fb-upgrade-button {
  cursor: pointer;
  margin-top: 10px;
}

.imt-manga-button:hover {
  opacity: 1;
}

.imt-manga-translated {
  position: absolute;
  left: 24px;
  top: 20px;
}

.imt-float-ball-loading {
  animation: imt-loading-animation 0.6s infinite linear !important;
}

.imt-manga-guide-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 372px;
  transform: translateY(-50%);
}

.imt-manga-guide-content {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  margin: 0 40px 0;
}

.img-manga-guide-button {
  width: fit-content;
  margin: 16px auto;
}

.img-manga-close {
  position: absolute;
  bottom: -200px;
  width: 32px;
  height: 32px;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.imt-fb-container.dragging .imt-fb-more-buttons,
.imt-fb-container.dragging .imt-manga-button,
.imt-fb-container.dragging .btn-animate:not(.imt-fb-btn) {
  display: none !important;
}

.imt-fb-container.dragging .imt-fb-btn {
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: move !important;
}

.imt-fb-container.dragging .imt-fb-btn div {
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.imt-fb-container.dragging .imt-fb-btn.left,
.imt-fb-container.dragging .imt-fb-btn.right {
  border-radius: 50% !important;
}

.imt-fb-container.dragging .imt-fb-btn.left div,
.imt-fb-container.dragging .imt-fb-btn.right div {
  border-radius: 50% !important;
}

.imt-fb-container.dragging .imt-fb-logo-img {
  margin: 0 !important;
  padding: 4px !important;
}

.imt-fb-container.dragging .imt-float-ball-translated {
  right: 2px !important;
  bottom: 2px !important;
}

@-webkit-keyframes imt-loading-animation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}

@keyframes imt-loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}
</style>
